flutter 为什么setState不能像我预期的那样工作?

f45qwnt8  于 2023-01-14  发布在  Flutter
关注(0)|答案(2)|浏览(149)

我已经使用了一个有状态的小部件,但是当按下添加按钮时,这个项目似乎不会显示。

final TextEditingController _commentController = TextEditingController();
List<String> _genComments = [
    'comment 1',
    'comment 2',
    'comment 3',
    'comment 4',
    'comment 5'
];

下面是我在ListView中显示项目的代码:

Expanded(
child: Container(
  width: double.infinity,
  child: ListView.builder(
    itemCount: _genComments.length,
    itemBuilder: (context, index) {
      return Container(
        width: double.infinity,
        height: 100,
        child: Card(
          color: Colors.white,
          elevation: 5,
          child: Text(_genComments[index]),
        ),
      );
    },
  ),
),
),

下面是我在button中使用setState的代码:

child: ElevatedButton(
onPressed: () {
  setState(() {
    _genComments.add(_commentController.text);
  });
  _commentController.clear();
},
km0tfn4u

km0tfn4u1#

您可以使用以下代码在列表视图中添加新元素

TextEditingController commentController = TextEditingController();

     List<String> getComments = [
    'comment 1',
    'comment 2',
    'comment 3',
    'comment 4',
    'comment 5'
     ];
    
     void addItemToList(){
        setState(() {
          getComments.add(commentController.text);
        });
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Column(
            children: <Widget>[
              Padding(
                padding: EdgeInsets.all(20),
                child: TextField(
                  controller: commentController,
                ),
              ),
              RaisedButton(
                child: Text('Add'),
                onPressed: () {
                  addItemToList();
                },
              ),
              Expanded(
                child: ListView.builder(
                  padding: const EdgeInsets.all(8),
                  itemCount: getComments.length,
                  itemBuilder: (context, index) {
                      return Container(
                        width: double.infinity,
                        height: 100,
                        child: Card(
                          color: Colors.white,
                          elevation: 5,
                          child: Text(getComments[index].toString()),
                        ),
                      );
                    },
                )
              )
            ]
          )
        );
      }
    }
vc6uscn9

vc6uscn92#

当你调用setState时,它将调用build方法。这意味着在这个方法中的所有小部件将被重新执行。

Widget build(BuildContext context) {
        return Scaffold(

一个常见的错误是,人们在build方法中声明变量。这会导致状态变量不会更新。因为每次他们调用setState时,值都会重新声明为初始值。例如:

Widget build(BuildContext context) {
  final TextEditingController _commentController = TextEditingController();
  List<String> _genComments = [
    'comment 1',
    ....
    ];

    return Scaffold(
  • 正确:

build方法外声明状态变量。

final TextEditingController _commentController = TextEditingController();
  List<String> _genComments = [
    'comment 1',
    .....
    ];

Widget build(BuildContext context) {
    return Scaffold(

因此,当您调用setState时,它将更新变量的值。

相关问题