Question

我添加项目的按钮没有显示。

我要求用户填写玩家姓名。如果用户想添加玩家，请单击按钮以添加新字段

List<Widget> _playerList = new List(); //_playerList is my List name

ListView.builder(
    itemBuilder: (context,index){
      _playerList.add(new TextField());
      Widget widget = _playerList.elementAt(index);
    return widget;
    }),

    new FlatButton.icon(
                        color: Colors.black,
                        icon: Icon(
                          Icons.add,
                          color: Colors.white,
                          size: 18,
                        ),
                        label: Text('Add player',
                            style: TextStyle(fontSize: 12, color: Colors.white)),
                        onPressed: () {
                          _playerList.add(new Text("ggg"));
                        },


                    ),

添加按钮不显示

Answer 1

在您的代码中，下面部分说明了问题-

ListView.builder(
    itemBuilder: (context,index){
      _playerList.add(new TextField());
      Widget widget = _playerList.elementAt(index);
    return widget;
    }),

删除'_playerList.add（new TextField（））;'线。它应该喜欢-

 class Items extends StatefulWidget {
      @override
      State<StatefulWidget> createState() {
        return _ItemsState();
      }
    }

    class _ItemsState extends State<Items> {
       List<Widget> _playerList = new List(); //_playerList is my List name

      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Scaffold(
            body: Column(
              children: <Widget>[
                new FlatButton.icon(
                  color: Colors.black,
                  icon: Icon(
                    Icons.add,
                    color: Colors.white,
                    size: 18,
                  ),
                  label: Text('Add player',
                      style: TextStyle(fontSize: 12, color: Colors.white)),
                  onPressed: () {
                    setState(() {

                      _playerList.add(new Text("ggg"));
                      print(_playerList);
                    });
                  },
                ),
                Expanded(
                    child: ListView.builder(
                      itemCount:_playerList.length ,
                        itemBuilder: (context,index){
                          Widget widget = _playerList.elementAt(index);
                          return widget;
                        })
                )
              ],
            ));
      }
    }

Answer 2

更改_playerList属性后，必须调用setState。我不确定是要在按钮按下时添加更多文本字段还是要在按钮按下时添加文本，所以我编写了在按钮按下时添加文本字段的代码。

List<Widget> _playerList = []; 

  ListView.builder(
    itemBuilder: (context,index){
    return _playerList[index];
    })

    FlatButton.icon(
      color: Colors.black,
      icon: Icon(
        Icons.add,
        color: Colors.white,
        size: 18,
      ),
      label: Text('Add player',
          style: TextStyle(fontSize: 12, color: Colors.white)),
      onPressed: () {
        _playerList.add(TextField());
        setState(() {});
      },
    ),

Answer 3

您必须使用setState，这是代码。

屏幕截图https://imgur.com/97WobGx

 List<String> _playerList = List();
 TextEditingController controller = TextEditingController();

这是设置状态

 _submit() {
   setState(() {
     _playerList.add(controller.text);
   });
 }

这是身体

  Scaffold(
    body: Column(
      children: <Widget>[
        SizedBox(height: 15.0),
        TextField(
          controller: controller,
          decoration: InputDecoration(
            hintText: 'Add Player',
          ),
        ),
        SizedBox(height: 15.0),
        Center(
          child: FlatButton.icon(
              color: Colors.black,
              icon: Icon(
                Icons.add,
                color: Colors.white,
                size: 18,
              ),
              label: Text('Add player',
                  style: TextStyle(fontSize: 12, color: Colors.white)),
              onPressed: () => _submit()),
        ),
        SizedBox(height: 20.0),
        Expanded(
          child: ListView(
            padding: EdgeInsets.all(10.0),
            children: _playerList.reversed.map((data) {
              return Dismissible(
                key: Key(data),
                child: ListTile(
                  title: Text('$data'),
                ),
              );
            }).toList(),
          ),
        ),
      ],
    ),
  );

用户单击按钮时如何在列表中添加TextField？

3 个答案: