Question

我有一个名为 ListItem 的有状态小部件。
它显示列表中的总用户数。我选择了一些用户，当我点击发送按钮时，我希望所有这些选定的用户都被取消选择。 image shows user list and selected user。

我如何编码以获得该结果，下面的代码显示了 ListItem 小部件和显示我的列表的 UserListPage。

final UserData user;
final ValueChanged<bool> isSelectedFun;
ListItem({
 required this.user,
 required this.isSelectedFun,
});

@override
_ListItemState createState() => _ListItemState();
}

class _ListItemState extends State<ListItem> {
var isSelected = false.obs;

@override
Widget build(BuildContext context) {
 return GetBuilder<UserListController>(
   init:UserListController(),
   builder: (controller) {
     return Column(
       children: [
         GestureDetector(
           onTap: () {
                setState(() {
                   isSelected.toggle();
           widget.isSelectedFun(isSelected.value);
                });
           //GroupSelController.to.update();
           },
           child: Obx((){
             return  ListTile(
              title: Text("${widget.user.name}",style: textbody14.copyWith(color:Colors.black),),
              trailing: isSelected.value
                ? Icon(
                        Icons.check_circle,
                        color: Theme.of(context).primaryColor,
                      )
                :SizedBox()
            );
           }),
         ),
         Divider()
       ],
     );
   }
 );
}

 class UserListPage extends StatefulWidget {


@override
_UserListPageState createState() => _UserListPageState();
}

class _UserListPageState extends State<UserListPage> {



@override
Widget build(BuildContext context) {
 return GetBuilder<UserListController>(
   init: UserListController(),
   builder: (controller) {
     return Scaffold(
       appBar: AppBar(
         title: Text("Users"),
         actions: [
          IconButton(onPressed: (){
            Get.find<AuthController>().signOut();
          }, 
          icon: Icon(Icons.logout))
         ],
       ),
       body: Container(
         height:Get.height,
         width:Get.width,
         child:Column(
           children: [
             Row(
               mainAxisAlignment: MainAxisAlignment.center,
               children: [
                  controller.selCount > 0
           ?ElevatedButton(onPressed: (){
               Get.dialog(msgDialog());
           }, child: Text("Send")):Text("Tap to select user/s")
               ],
             ),
             Obx((){
               return Column(
               children:List.generate(
                 controller.usersList.length, (index) {
                   return ListItem(
                       user: controller.usersList[index],
                       isSelectedFun: (bool value) {
                    
                       if (value) {
                         controller.selectedList.add(
                           controller.usersList[index]);
                           controller.update();
                       } else {
                         controller.selectedList.remove(
                           controller.usersList[index]);
                           controller.update();
                       }
                    
                     //print("$index : $value");
                   },
                     );
                 })
             );
             })
           ],
         )
       ),
     );
   }
 );
}

Answer 1

我对你很好，你想要某种单选按钮功能。您可以通过为它们提供索引来使用。例如：

       int selectedIndex = 0;

对于指示器图标，检查每个项目：例如，对于一种情况： if(selectedIndex==1) // 显示图标

你可以在 ontap 上更新 selectedIndex 到列表项

在颤动中从树中销毁有状态的小部件

1 个答案: