dart - 为什么我的 ListView 没有用 setstate 更新

Question

在下面的代码中，我有小部件列表，并在 ListView 中使用，我使用 list.add() 在 setstate 中添加小部件，列表也没有更新，我不知道发生了什么。为什么我的列表没有更新

这是下面的代码

class EditorPageState extends State<EditorPage> {

List<Widget> obj = List<Widget>();

GlobalKey formkey= GlobalKey<FormState>();



@override
Widget build(BuildContext context) {

obj.add( TextFormField(
        textCapitalization: TextCapitalization.sentences,
        maxLength: 50,
        decoration: InputDecoration(
          labelText: "TITLE",
          hintText: "UR ARTICLE NAME"
        ),
      ));
      obj.add(TextFormField(decoration: InputDecoration(
          labelText: "Article's Propic",
          hintText: "Only image Url is Accepted"
        ),));

return Scaffold(
  appBar: AppBar(title: Text("data"),),
body: Form(
  key: formkey,
  child:Stack(
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.only(bottom: 50),
        child: ListView(
                shrinkWrap: true,
                  children: obj
              ),
      ),
            Container(
              height: MediaQuery.of(context).size.height,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  SizedBox(),
                  Container(
                    alignment: Alignment.bottomCenter,
                    height: 50,width: MediaQuery.of(context).size.width,
      color: Colors.black38,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          IconButton(icon: Icon(Icons.format_bold),color: Colors.white,onPressed: (){
                    setState(() {
                      obj.add(TextFormField(
                      style: TextStyle(fontWeight: FontWeight.bold),
                      decoration: InputDecoration(
                        labelText: "heading"
                      ),
                    ));
                    });
          },),
          IconButton(icon: Icon(Icons.add),
          onPressed: (){
                    setState(() {
                      obj.add(TextFormField(
                      style: TextStyle(fontWeight: FontWeight.bold),
                      decoration: InputDecoration(
                        labelText: "Start again here"
                      ),
                    ));
                    });
          }
          ),
          IconButton(icon: Icon(Icons.add_a_photo),
          onPressed: (){

          }
          ),
          IconButton(icon: Icon(Icons.delete),
          onPressed: (){

          },
          )
        ],
      ),
      ),
                ],
              ),
            ),
    ],
  ),
      ),

);

}
}

上面的代码是 statefulwidget 广告，它是全屏对话框
就是这样，我可以知道为什么我的列表没有更新

Answer 1

那么您将需要实现一个 ListViewBuilder 来执行此操作，请拆分您的布局创建，您的构建方法不可读。我对您的布局进行了一些更改以提高可读性，并且源代码中有一些注释可以帮助您了解我所做的更改。我希望它能有所帮助，您也可以根据自己的需要调整此代码。

class EditorPageState extends State<EditorPage> {

  List<Widget> obj = List<Widget>();
  GlobalKey formkey= GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    obj.add( TextFormField(
      textCapitalization: TextCapitalization.sentences,
      maxLength: 50,
      decoration: InputDecoration(
          labelText: "TITLE",
          hintText: "UR ARTICLE NAME"
      ),
    ));

    obj.add(TextFormField(decoration: InputDecoration(
        labelText: "Article's Propic",
        hintText: "Only image Url is Accepted"
    ),));

    return Scaffold(
      appBar: AppBar(title: Text("data"),),
      //you can use this property to easily create a bottom navigation
      bottomNavigationBar: _buildBottomNavigator(), // this method return BottomNavigation layout

      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: 16.0),
        child: Form(
          key: formkey,
          /// here your question answer... you need implemet a listView builder
          /// in every build this will create a new ListView getting itens of a especific list
          child : ListView.builder(
              itemCount: obj.length, // number of items in your list

              //here the implementation of itemBuilder. take a look at flutter docs to see details
              itemBuilder: (BuildContext context, int Itemindex){
                return obj[Itemindex]; // return your widget
              }),
        ),
      ),
    );
  }

  //create your bottom navigation layout
  Widget _buildBottomNavigator(){
    return Container(
      color: Colors.black54,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          IconButton(icon: Icon(Icons.format_bold),color: Colors.white,onPressed: (){
            setState(() {
              obj.add(TextFormField(
                style: TextStyle(fontWeight: FontWeight.bold),
                decoration: InputDecoration(
                    labelText: "heading"
                ),
              ));
            });
          },),

          IconButton(icon: Icon(Icons.add),
              onPressed: (){
                print("on pressed");
                setState(() {
                  obj.add( TextFormField(
                    style: TextStyle(fontWeight: FontWeight.bold),
                    decoration: InputDecoration(
                        labelText: "Start again here"
                    ),
                  ));
                });
              }
          ),
          IconButton(icon: Icon(Icons.add_a_photo),
              onPressed: (){

              }
          ),
          IconButton(icon: Icon(Icons.delete),
            onPressed: (){

            },
          )
        ],
      ),
    );
  }