Question

我的主屏幕是一个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小部件的代码不相关。基本上是一张带有标题的卡片。

Answer 1

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

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

方法setState（）未更新UI（Flutter）

1 个答案: