当我们点击任何选项时,红点应该是可见的,否则红点不应该是可见的。所以,我在考虑使用可见的,但我不能正确地使用它。所以,请帮助我在这方面。
dgtucam11#
你有很多选择,可以是if-else逻辑或者可见性小部件。
ListTile( onTap: () { setState(() { hasNewMessages = false; }); }, title: Text('Messages'), tileColor: Colors.red, trailing: hasNewMessages ? Container( decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.black), width: 20, height: 20, child: Center(child:Text('3'))) : SizedBox.shrink(), );
Here a sample with pure if-else logic
i7uaboj42#
更换dizayn并使用它
List<Icon> iconNames = [ const Icon(Icons.home_outlined), const Icon(Icons.settings_outlined) ]; List<String> tabTitles = ['Home', 'Settings']; class ForTest extends StatefulWidget { const ForTest({Key? key}) : super(key: key); @override // ignore: library_private_types_in_public_api _ForTestState createState() => _ForTestState(); } class _ForTestState extends State<ForTest> { int selectedIndex = 0; @override Widget build(BuildContext context) { return SafeArea( child: Scaffold( backgroundColor: Colors.indigo, body: Padding( padding: const EdgeInsets.all(20), child: ListView.builder( itemCount: 2, itemBuilder: (context, i) { return InkWell( onTap: () { setState(() => selectedIndex = i); }, child: Container( padding: const EdgeInsets.all(10), margin: const EdgeInsets.only(bottom: 10), decoration: BoxDecoration( color: Colors.deepPurple, borderRadius: BorderRadius.circular(10)), child: Row( children: [ iconNames[i], const SizedBox(width: 20), Text(tabTitles[i]), const Spacer(), if (selectedIndex == i) const Icon( Icons.circle, color: Colors.red, size: 10, ) ], ), ), ); }), ), )); } }
fnvucqvd3#
您可以按如下方式实现此功能:
import 'package:flutter/material.dart'; import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart'; class DataView extends StatefulWidget { const DataView({super.key}); @override State<DataView> createState() => _DataViewState(); } class _DataViewState extends State<DataView> { int selectedIndex = 0; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Data Table'), ), body: Column( children: [ ListView.builder( padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10), shrinkWrap: true, itemCount: 5, itemBuilder: (context, index) { return Padding( padding: const EdgeInsets.only(bottom: 15), child: InkWell( onTap: () { setState(() { selectedIndex = index; }); }, child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text('$index'), Visibility( visible: selectedIndex == index ? true : false, child: CircleAvatar( radius: 4, backgroundColor: Colors.red, ), ) ], ), ), ); }, ) ], ), ); } }
3条答案
按热度按时间dgtucam11#
你有很多选择,可以是if-else逻辑或者可见性小部件。
Here a sample with pure if-else logic
i7uaboj42#
更换dizayn并使用它
fnvucqvd3#
您可以按如下方式实现此功能: