我正在尝试使用flutter和firebase制作一个杂货应用程序，一切正常，但是当我按下复选框时，它会检查所有这些

Posted 2023-02-23

【中文标题】我正在尝试使用flutter和firebase制作一个杂货应用程序，一切正常，但是当我按下复选框时，它会检查所有这些

【英文标题】：I am trying to make a grocery app using flutter and firebase, everything is working but when I press the checkbox it Checks all of them

【发布时间】：2021-11-13 15:10:03

【问题描述】：

我制作了一个浮动操作按钮，每次按下它都会添加一个项目，每个项目旁边都有一个复选框，但是当我选中一个项目时，它会检查所有项目，我花了很多时间尝试弄清楚如何解决这个问题，但我不能。我真的可以使用你的帮助。

Future<void> main() async 
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(FireApp());


class FireApp extends StatefulWidget 
  @override
  _FireAppState createState() => _FireAppState();

    bool isChecked = false;

class _FireAppState extends State<FireApp> 
  final TextController = TextEditingController();
  @override
  Widget build(BuildContext context) 

    CollectionReference groceries =
    FirebaseFirestore.instance.collection('groceries');

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: TextField(
            controller: TextController,
          ),
        ),
        body: Center(
          child: StreamBuilder(
            stream: groceries.orderBy('name').snapshots(),
            builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) 
              return ListView(
                children: snapshot.data!.docs.map((grocery) 
                  return Center(
                    child: Row(
                      children: [
                        Container(color: Colors.red,height: 50,child: Text(grocery['name'])),
                        Checkbox(
                            materialTapTargetSize: MaterialTapTargetSize.padded,
                            value: isChecked,
                            activeColor: Colors.black,
                            checkColor: Colors.greenAccent,
                            onChanged: (bool) 
                              setState(() 
                                isChecked = !isChecked;
                              );
                            
                        )],
                    ),
                  );
                ).toList(),
              );
            ,
          ),
        ),
        floatingActionButton: FloatingActionButton(onPressed: () 
          groceries.add(
            'name': TextController.text,
          );
        ,),
      ),
    );
  

【参考方案1】：

您对所有复选框 (isChecked) 使用相同的变量，但您应该为每个数据设置一个变量，您可以将该属性添加到您的 firebase 文档中以便同步，或者您可以在本地创建它，但每次您的流更新您将需要比较哪个杂货店对应的复选框值可能很难。

更新

最简单的方法是在 Firestore 文档中添加一个 bool 参数

然后只要用户点击就推送更新

return ListView(
            children: snapshot.data!.docs.map((grocery) 
              return Center(
                child: Row(
                  children: [
                    Container(color: Colors.red,height: 50,child: Text(grocery['name'])),
                    Checkbox(
                        materialTapTargetSize: MaterialTapTargetSize.padded,
                        value: grocery['checked'],
                        activeColor: Colors.black,
                        checkColor: Colors.greenAccent,
                        onChanged: (val) async 
                          final data = grocery.data();
                          data['checked'] = val;
                          await grocery.reference.update(data);
                        
                    )],
                ),
              );
            ).toList(),
          );

现在这足以回答您的问题，稍后您会看到这会导致更多 Firestore 调用、列表中所有小部件的不必要重建等等，您将不得不考虑另一种优化资源的方法，例如观看流在其他地方有一个本地布尔列表，它使杂货的所有值保持同步，因此您只需使用 setState 在本地更新，最后在云端更新一次（可能是保存按钮）

【讨论】：

您能告诉我如何将属性添加到我的 firebase 文档吗？

试试这个例子

我刚刚尝试过，但对我来说它在data['checked'] = val; 行上不起作用，它说方法'[]' 不能无条件调用，因为接收器可以是'null'。尝试使调用有条件（使用'?.'）或向目标添加空检查（'！'）。在await grocery.reference.update(data); 行上，它说参数类型“对象？”不能分配给参数类型'Map'。

这与 null 安全性有关，请进行检查，或者如果您认为它不会为 null，请执行此最终 Map data =grocery.data()！作为地图;

非常感谢，你不知道我多么想制作这个应用程序，你真的成就了我的一年！正如您可能知道的那样，我还没有上过任何 Flutter 课程，我想知道 Flutter 是否能够做到这一点，现在我肯定会参加一些课程。再次感谢您。