如何处理 Listview.builder 中的多个复选框？答案

【问题标题】：How to handle multiple checkboxes from a Listview.builder?如何处理 Listview.builder 中的多个复选框？
【发布时间】：2021-03-10 23:54:29
【问题描述】：

我有一个返回复选框及其标签的 ListView.builder。此列表视图将返回将显示在屏幕上的复选框和标签列表。目前，我只是创建一个全局变量 isChecked 并使用 onChanged 回调和此值更改复选框的值。但它会改变屏幕上所有复选框的值。

我需要一种方法来单独处理每个复选框，而无需修改其他复选框值。并记录勾选的复选框。我为此使用了一个 checkboxtile 小部件。

【问题讨论】：

简短回答：带有相关项目的索引。对于长答案，请在您的问题中提供一些您已经拥有的代码。

标签： flutter flutter-listview

【解决方案1】：

您可以将您的 isChecked bool 更改为 bool 列表，如下所示：

List<bool> isChecked = List.generate(_len, (index) => false);

您可以按如下方式计算已选中 Checkbox 的数量：

isChecked.where((check) => check == true).length

您可以按如下方式计算未选中复选框的数量：

isChecked.where((check) => check == false).length

请参阅下面的代码，其中在应用标题中设置复选框选中/未选中计数。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  static int _len = 10;
  List<bool> isChecked = List.generate(_len, (index) => false);
  String _getTitle() =>
      "Checkbox Demo : Checked = ${isChecked.where((check) => check == true).length}, Unchecked = ${isChecked.where((check) => check == false).length}";
  String _title = "Checkbox Demo";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('$_title'),
      ),
      body: ListView.builder(
        itemCount: _len,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text("Item $index"),
            trailing: Checkbox(
                onChanged: (checked) {
                  setState(
                    () {
                      isChecked[index] = checked;
                      _title = _getTitle();
                    },
                  );
                },
                value: isChecked[index]),
          );
        },
      ),
    );
  }
}

【讨论】：

【解决方案2】：

由于您没有共享任何代码，我假设您有一个变量isChecked。但是您应该有一个isChecked 的列表，以便您可以单独存储它们。

List<bool> isChecked = List<bool>.generate(length, index => false);

ListView.builder(
  itemCounter: length,
  itemBuilder: (BuildContext context,int index){ 
      return Checkboxtile ( 
        title: 'label', 
        value: isChecked[index],
        onChanged: (newValue) {
          setState(() {
            isChecked[index] = newValue;
          }); 
        },
      ); 
    }

计算编号。勾选的复选框：

int _checkedBox = 0;
for (int i = 0; i < isChecked.length; i++) 
  if (isChecked[i])
    _checkedBox++;

【讨论】：

有什么办法也可以计算这些勾选的复选框吗？