时间戳

首页 > 解决方案 > 通过循环渲染复选框

list - 通过循环渲染复选框

问题描述

void filterList(BuildContext context) {
  showModalBottomSheet(
    context: context,
    builder: (bContext) {
      return FilterList();
    },
  );
}// creating a bottom modal sheet

class FilterList extends StatefulWidget {
  @override
   _FilterListState createState() => _FilterListState();
}//creating a state for checkboxes

class _FilterListState extends State<FilterList> {
  int i; 
  bool checkvalue = false;
  Widget _element(String id) {
    return Row(
      children: <Widget>[
        Checkbox(
          value: checkvalue,
          onChanged: (value) {
            setState(
              () {
                checkvalue = value;
              },
            );
          },
        ),
        Text('$id')
      ],
    );
  }// A new Widget where I get to combine the checkboxes with their respective texts

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[for (i = 10; i <= 120; i = i + 10) _element('$i HP')],
// for loop for iterating the widget rendering
//HP stands for horsepower...
    );
  }
}

因此，我尝试在底部模式表内创建过滤器 UI 时使用“for循环”呈现复选框。在这里，当我尝试更改一个复选框的状态时，所有其他复选框的状态也会更改。有没有办法让我保留 for 循环，但只更改所选复选框的状态？或者，我是否必须一直放弃循环和硬编码？

标签： listflutteruser-interfacedartcheckbox

解决方案

您需要将所有checkvalues 存储在 a 中List：

class FilterList extends StatefulWidget {
  @override
  _FilterListState createState() => _FilterListState();
} //creating a state for checkboxes

class _FilterListState extends State<FilterList> {
  int i;
  List<bool> checkvalue = new List<bool>.filled(12, false); // this is new
  Widget _element(String id, int index) { // index added
    return Row(
      children: <Widget>[
        Checkbox(
          value: checkvalue[index], // [index] added
          onChanged: (value) {
            setState(
              () {
                checkvalue[index] = value; // [index] added
              },
            );
          },
        ),
        Text('$id')
      ],
    );
  } // A new Widget where I get to combine the checkboxes with their respective texts

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        for (i = 10; i <= 120; i = i + 10) _element('$i HP', i ~/ 10 - 1) // index added
      ],
// for loop for iterating the widget rendering
//HP stands for horsepower...
    );
  }
}

推荐阅读