在颤动中动态创建的复选框不会改变单击时的状态

2024-01-05

每次按下按钮时,我都会创建一个复选框字段。但生成的复选框在按下时不会更改状态,而是生成的下一个复选框带有更改后的状态。

我已附上其当前工作方式的视频(https://i.stack.imgur.com/dWxxK.jpg https://i.stack.imgur.com/dWxxK.jpg )

我的整个代码是这样的:

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),
         ),
        ],
      ) ,
    );
  }

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


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

这将是模型:

class ListTileModel {
  bool enabled;
  String text;

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

然后,当用户点击图块时,只需更新该特定行的状态。您现在拥有的是所有图块的一般状态。因此,不要使用小部件数组,而是使用代表每一行的模型数组。最后,使用地图函数构建所有项目

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()),
          ),
        ],
      ),
    );
  }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在颤动中动态创建的复选框不会改变单击时的状态 的相关文章

随机推荐