如何处理在flutter中动态创建的复选框列表？

Question

使用flutter,我正在尝试使用一些文本和旁边的自定义复选框构建值列表.点击文本或复选框上的任意位置应显示启用状态,再次点击应禁用它.我不确定如何分别处理每个复选框的状态.我也试过使用CheckBoxListTile,但我不确定如何实现我想要的.有人可以提供任何例子吗？

Answer 1

Here's some sample code for CheckboxListTile. You can find more examples in the gallery.

import 'package:flutter/material.dart';

class Demo extends StatefulWidget {
  @override
  DemoState createState() => new DemoState();
}

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

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

void main() {
  runApp(new MaterialApp(home: new Demo(), debugShowCheckedModeBanner: false));
}

Answer 2

使用带有复选框的动态数据列表来执行此操作的简单方法。

List<String>data= ["Mathew","Deon","Sara","Yeu"];
List<String> userChecked = [];

ListView.builder(
    itemCount: data.length,
    itemBuilder: (context, i) {
      return ListTile(
        title: Text(
            data[i])
        trailing:Checkbox(
                value: userChecked.contains(data[i]),
                onChanged: (val) {
                  _onSelected(val, data[i]);
                },
              )
            //you can use checkboxlistTile too
      );
    })
// now we write the functionality to check and uncheck it!!

void _onSelected(bool selected, String dataName) {
    if (selected == true) {
      setState(() {
        userChecked.add(dataName);
      });
    } else {
      setState(() {
        userChecked.remove(dataName);
      });
    }
  }

完成了！！...享受 Fluttering...竖起大拇指，因为它会为你工作！：P

Answer 3

使用列表包含返回布尔值。

这是例子

List<int> selectedList = [];
List<Widget> = mList;
createMenuWidget(Course courses) {
  for (int b = 0; b < courses.length; b++) {
    Map cmap = courses[b];
    mList.add(CheckboxListTile(
      onChanged: (bool value){
        setState(() {
          if(value){
            selectedList.add(cmap[course_id]);
          }else{
            selectedList.remove(cmap[course_id]);
          }
        });
      },
      value: selectedList.contains(cmap[course_id]),
      title: new Text(cmap[course_name]),
    ));
  }
}

Answer 4

我认为它将按您希望的那样工作。还将所有选定的复选框值存储到List变量中。因此，您只需将此代码放入main.dart文件中，然后执行以检查其工作原理。

import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Multi-Select & Unselect Checkbox in Flutter'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  List _selecteCategorys = List();

  Map<String, dynamic> _categories = {
    "responseCode": "1",
    "responseText": "List categories.",
    "responseBody": [
      {"category_id": "5", "category_name": "Barber"},
      {"category_id": "3", "category_name": "Carpanter"},
      {"category_id": "7", "category_name": "Cook"}
    ],
    "responseTotalResult":
        3 // Total result is 3 here becasue we have 3 categories in responseBody.
  };

  void _onCategorySelected(bool selected, category_id) {
    if (selected == true) {
      setState(() {
        _selecteCategorys.add(category_id);
      });
    } else {
      setState(() {
        _selecteCategorys.remove(category_id);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: ListView.builder(
          itemCount: _categories['responseTotalResult'],
          itemBuilder: (BuildContext context, int index) {
            return CheckboxListTile(
              value: _selecteCategorys
                  .contains(_categories['responseBody'][index]['category_id']),
              onChanged: (bool selected) {
                _onCategorySelected(selected,
                    _categories['responseBody'][index]['category_id']);
              },
              title: Text(_categories['responseBody'][index]['category_name']),
            );
          }),  
    );
  }
}

Answer 5

请使用包 grouped_buttons。
它支持复选框和收音机。
https://pub.dartlang.org/packages/grouped_buttons

CheckboxGroup(
      labels: <String>[
        "Sunday",
        "Monday",
        "Tuesday",
        "Wednesday",
        "Thursday",
        "Friday",
        "Saturday",
      ],
      disabled: [
        "Wednesday",
        "Friday"
      ],
      onChange: (bool isChecked, String label, int index) => print("isChecked: $isChecked   label: $label  index: $index"),
      onSelected: (List<String> checked) => print("checked: ${checked.toString()}"),
    ),

以及此处使用的完整示例https://github.com/akshathjain/grouped_buttons/blob/master/example/lib/main.dart

和作者实现https://github.com/akshathjain/grouped_buttons/blob/master/lib/src/checkbox_group.dart的逻辑

基本上，作者使用两个字符串列表来控制选择和取消选择

void onChanged(bool isChecked, int i){
  bool isAlreadyContained = _selected.contains(widget.labels.elementAt(i));

  if(mounted){
   setState(() {
    if(!isChecked && isAlreadyContained){
      _selected.remove(widget.labels.elementAt(i));
    }else if(isChecked && !isAlreadyContained){
      _selected.add(widget.labels.elementAt(i));
    }

    if(widget.onChange != null) widget.onChange(isChecked, widget.labels.elementAt(i), i);
    if(widget.onSelected != null) widget.onSelected(_selected);
   });
 }
}

Answer 6

屏幕截图（空安全）

代码：

class _MyPageState extends State<MyPage> {
  final Map<String, bool> _map = {};
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () => setState(() => _map.addEntries([MapEntry('Checkbox #${++_count}', false)])),
      ),
      body: ListView(
        children: _map.keys
            .map(
              (key) => CheckboxListTile(
                value: _map[key],
                onChanged: (value) => setState(() => _map[key] = value!),
                subtitle: Text(key),
              ),
            )
            .toList(),
      ),
    );
  }
}