通过循环渲染复选框

问题描述

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循环，但是仅更改所选复选框的状态？或者，我是否必须放弃循环并一直进行硬编码？

解决方法

您需要将所有checkvalue存储在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...
    );
  }
}