flutter - flutter 中动态创建的复选框不会更改单击时的状态

Question

每次按下按钮时，我都会创建一个复选框字段。但是生成的复选框在按下时不会改变状态，而是生成的下一个复选框会随着状态的改变而改变。

我附上了它目前如何工作的视频 (https://imgur.com/a/75vE5cj)

我的整个代码是这样的:

class ToDoNotes extends StatelessWidget {
 @override
  Widget build(BuildContext context) {
  SizeConfig().init(context);
  return new MaterialApp(
  title: 'notes',
  theme: new ThemeData(
    primarySwatch: Colors.green,
  ),
  home: new T_notes(),
); }}

class T_notes extends StatefulWidget {
 static String tag = 'T_notes';
@override
_T_notesState createState() => new _T_notesState();
}

这是我动态创建复选框的代码。

class _T_notesState extends State<T_notes> {
bool rememberMe = false;
 void _onRememberMeChanged(bool newValue) => setState(() {
 rememberMe = newValue;
 });
List<Widget> _children = [];
int _count = 0;
String input;
int i=0;
void _add() {
_children = List.from(_children)
  ..add(
      CheckboxListTile(
        value: rememberMe,
        onChanged: _onRememberMeChanged,
        title: new Text(input,style: TextStyle(color: Colors.black)),
        controlAffinity: ListTileControlAffinity.leading,
        activeColor: Colors.black,
      )
   );
 setState(() {
  ++_count;
});
i++;
}

在主体内部的小部件 build() 中，我将动态小部件作为:

@override
Widget build(BuildContext context) {
return new Scaffold(
  resizeToAvoidBottomPadding: false,
     body: ListView(
    padding: EdgeInsets.all(28.0),
      children: <Widget>[
        SizedBox(height: 30),
        new Row(
          children: <Widget>[
            SizedBox(width:0.2),
            new Container(
              width:200,
              child: new TextField(
                textAlign: TextAlign.left,
                decoration: InputDecoration(
                  border: OutlineInputBorder(borderRadius: BorderRadius.circular(138.0)),
                  hintText: 'Enter the text',
                ),
                onChanged: (val) {
                  input = val;
                  }
              ),
            ),

            SizedBox(width:10),
             new Container(
          width: 80,
          child:new Material(
            borderRadius: BorderRadius.circular(30.5),
            shadowColor: Colors.lightBlueAccent.shade100,
            elevation: 1.0,
            child: new MaterialButton(
              onPressed: () {
                _add();
                },
               child: Text('ADD', style: TextStyle(color: Colors.lightGreen,fontSize: 15)),
             ),
           ),
         ),
          ],
         ),
         new Container(
          height: 390,
          child: ListView(children: _children),
         ),
        ],
      ) ,
    );
  }

我希望复选框字段在单击时正确更改状态。

Answer 1

好的，这里的问题是您需要为每个 CheckboxListTile 建立一个模型来保存每个 CheckboxListTiles 的状态。

这就是模型:

class ListTileModel {
  bool enabled;
  String text;

  ListTileModel(this.enabled,this.text);
}

然后，当用户点击一个 Tile 时，只需更新该特定行的状态。您现在拥有的是所有 Tiles 的一般状态。因此，与其拥有一个小部件数组，不如拥有一个代表每一行的模型数组。最后，使用 map 功能构建所有项目

class _T_notesState extends State<T_notes> {
  bool rememberMe = false;

  List<ListTileModel> _items = [];

  String input;
  int i = 0;

  void _add() {
    _items.add(ListTileModel(false,input));
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      resizeToAvoidBottomPadding: false,
      body: ListView(
        padding: EdgeInsets.all(28.0),
        children: <Widget>[
          SizedBox(height: 30),
          new Row(
            children: <Widget>[
              SizedBox(width: 0.2),
              new Container(
                width: 200,
                child: new TextField(
                    textAlign: TextAlign.left,
                    decoration: InputDecoration(
                      border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(138.0)),
                      hintText: 'Enter the text',
                    ),
                    onChanged: (val) {
                      input = val;
                    }),
              ),
              SizedBox(width: 10),
              new Container(
                width: 80,
                child: new Material(
                  borderRadius: BorderRadius.circular(30.5),
                  shadowColor: Colors.lightBlueAccent.shade100,
                  elevation: 1.0,
                  child: new MaterialButton(
                    onPressed: () {
                      _add();
                    },
                    child: Text('ADD',
                        style:
                            TextStyle(color: Colors.lightGreen, fontSize: 15)),
                  ),
                ),
              ),
            ],
          ),
          new Container(
            height: 390,
            child: ListView(
                children: _items
                    .map((item) => CheckboxListTile(
                          value: item.enabled,
                          onChanged: (enabled) {
                            item.enabled = enabled;
                            setState(() {});
                          },
                          title: new Text(item.text,
                              style: TextStyle(color: Colors.black)),
                          controlAffinity: ListTileControlAffinity.leading,
                          activeColor: Colors.black,
                        ))
                    .toList()),
          ),
        ],
      ),
    );
  }
}