方法setState未更新UIFlutter

问题描述

我的主屏幕是一个Scaffold，其主体具有ListView，底部具有一个浮动动作按钮。动作按钮将用户带到第二个屏幕，他可以在其中输入文本到文本输入中，然后按保存。保存按钮在主屏幕上调用一个方法，该方法将文本添加到ListView所基于的List变量中。问题是：List变量正在更新（我可以在日志上看到），但是setState没有更新ListView。我在做什么错了？

这是主屏幕中的代码：

import 'package:Flutter/material.dart';
import 'addCounter.dart';

class Home extends StatefulWidget {
  @override
  HomeState createState() => HomeState();
}

class HomeState extends State<Home> {
    
    List lista = <Widget>[];

    void incrementLista(newItem) {
      print('$lista');
      setState(() {
        lista.add(Box('newItem'));
      });
    }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text('List of Counters'),backgroundColor: Colors.deepPurple[1000],),body: Builder(
        builder: (context)=>
       Center(
            child: ListView(children: lista),floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.grey[1000],onpressed: () {
            Navigator.push(
                context,MaterialPageRoute(
                    builder: (context) => AddCounter(f: incrementLista)));
          },child: Icon(Icons.add,color: Colors.white)),floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,bottomNavigationBar: BottomNavigationBar(
        unselectedItemColor: Colors.grey[700],items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.list),title: Text('Lista'),BottomNavigationBarItem(
            icon: Icon(Icons.insert_chart),title: Text('Gráfico'),],selectedItemColor: Colors.blue,);
  }
}

这是addCounter.dart中的代码：

import 'package:Flutter/material.dart';

class AddCounter extends StatefulWidget {
  final Function f;
  AddCounter({@required this.f});

  @override
  _AddCounterState createState() => _AddCounterState();
}

class _AddCounterState extends State<AddCounter> {
  final myController = TextEditingController();

  @override
  void dispose() {
    myController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Add a counter'),backgroundColor: Colors.blue,body: Column(children: [
          Padding(
            padding: EdgeInsets.all(15),child: TextField(
              controller: myController,decoration: Inputdecoration(
                  enabledBorder: OutlineInputBorder(
                      borderSide: BorderSide(color: Colors.blue,width: 2)),hintText: 'Type a name for the counter'),RaisedButton(
            color: Colors.green,onpressed: () {
              widget.f(myController.text);
              Navigator.pop(context);
            },child: Text(
              'Save',style: TextStyle(color: Colors.white),)
        ]));
  }
}

我认为Box小部件的代码不相关。基本上是一张带有标题的卡片。

解决方法

@pskink给了我一个完美的答案。在这里：

基本上，您不应使用这样的小部件列表，数据和表示层应分开，而应仅使用数据列表，有关更多信息，请参见https://flutter.dev/docs/cookbook/gestures/dismissible

dart flutter-layout flutter-widget