如何动态地使多个复选框颤动并将它们的值放在一起答案

【问题标题】：How to make Multiple Checkbox in flutter dynamically and get their values together如何动态地使多个复选框颤动并将它们的值放在一起
【发布时间】：2020-02-05 02:21:19
【问题描述】：

我是 Flutter 的新手，我在创建包含多个项目的 CheckBox 时遇到问题，然后用户还可以从复选框列表中选择多个项目。请帮帮我，伙计们。

【问题讨论】：

你能更好地解释一下你想要做什么吗？你的用例是什么？
我想创建一个包含多个项目的复选框列表视图，当用户开始选择它们时，他们将开始添加到一个新数组中，然后我必须将所有选定的项目显示到带有更新项目的文本小部件中。跨度>

标签： flutter dart checkbox dynamically-generated

【解决方案1】：

你可以试试这个小部件CheckboxListTile：

import 'package:flutter/material.dart';

class DemoCheck extends StatefulWidget {
  @override
  DemoCheckState createState() => new DemoCheckState();
}

class DemoCheckState extends State<Demo> {
  Map<String, bool> values = {
    'foo': true,
    'bar': false,
  };

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: Text('Demo')),
      body: ListView(
        children: values.keys.map((String key) {
          return new CheckboxListTile(
            title: Text(key),
            value: values[key],
            onChanged: (bool value) {
              setState(() {
                values[key] = value;
              });
            },
          );
        }).toList(),
      ),
    );
  }
}

void main() {
  runApp( MaterialApp(home: DemoCheck()));
}

【讨论】：

感谢分享您的代码，当我选择任何项目表单复选框时，我还需要一件事，它会自动将所有选定项目添加到新数组或地图中，然后我必须使用文本小部件在屏幕上显示选定项目.如果你能帮助我，我会很高兴的。
请帮我解决这个问题stackoverflow.com/questions/64108301/…

【解决方案2】：

这里有一个完整的例子，说明如何制作它以及如何将这个价值结合在一起

Map 是 Key-Value 对中的数据集合。地图中的数据可以通过其关联的键轻松访问。我们将创建一个包含字符串和布尔数据的 Map 数组。字符串为 Checkbox 的名称，Boolean 用于判断哪个复选框被选中。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
          appBar: AppBar(
            centerTitle: true,
            backgroundColor: Colors.deepPurple[400],
            title: Text("Multiple Checkbox Dynamically"),
          ),
          body: SafeArea(
              child : Center(
                child:DynamicallyCheckbox(),
              )
          )
      ),
    );
  }
}

class DynamicallyCheckbox extends StatefulWidget {
  @override
  DynamicallyCheckboxState createState() => new DynamicallyCheckboxState();
}

class DynamicallyCheckboxState extends State {

  Map<String, bool> List = {
    'Egges' : false,
    'Chocolates' : false,
    'Flour' : false,
    'Fllower' : false,
    'Fruits' : false,
  };

  var holder_1 = [];

  getItems(){
    List.forEach((key, value) {
      if(value == true)
      {
        holder_1.add(key);
      }
    });

    // Printing all selected items on Terminal screen.
    print(holder_1);
    // Here you will get all your selected Checkbox items.

    // Clear array after use.
    holder_1.clear();
  }

  @override
  Widget build(BuildContext context) {
    return Column (children: <Widget>[

      RaisedButton(
        child: Text(" Get Checked Checkbox Values "),
        onPressed: getItems,
        color: Colors.pink,
        textColor: Colors.white,
        splashColor: Colors.grey,
        padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
      ),

      Expanded(
        child :
        ListView(
          children: List.keys.map((String key) {
            return new CheckboxListTile(
              title: new Text(key),
              value: List[key],
              activeColor: Colors.deepPurple[400],
              checkColor: Colors.white,
              onChanged: (bool value) {
                setState(() {
                  List[key] = value;
                });
              },
            );
          }).toList(),
        ),
      ),]);
  }
}

单击“获取选中的复选框值”按钮，您将获得输出

flutter: [Egges, Chocolates, Fllower, Fruits]

发件人：https://blog.bajarangisoft.com/blog/how-to-create-multiple-checkbox-dynamically-in-flutter

【讨论】：