Flutter列表视图未更新

f5emj3cl  于 2022-12-19  发布在  Flutter
关注(0)|答案(4)|浏览(303)

我想在Flutter中创建一个当新数据到达时更新的ListView。我使用了一个RefreshIndicator来触发列表加载以进行测试。对于我的列表,我使用了一个ListBuilder来Map我的对象到视图对象。
据我所知,setState()应该触发对我的列表的更新,但是它没有。
调试显示,调用setState()回调函数后,my _listContent实际上填充了72个条目。为什么我的列表没有自动更新?我错过了什么吗?

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    List<Manga> _listContent = new List<Manga>();

    void _addMangas(List<Manga> mangas) {
      setState(() {
        _listContent.addAll(mangas);
        print('Cleared list');
        });
    }

    Future<Null> _onRefresh() {
      Completer<Null> completer = new Completer<Null>();

      loadMangaItems().then((mangas) => _addMangas(mangas));
      completer.complete();

      return completer.future;
    }

    return new Scaffold(
      appBar: new AppBar(

        title: new Text(widget.title),
      ),
      body: new RefreshIndicator(
          child: new ListView.builder(
              itemCount: _listContent.length,
              itemBuilder: (BuildContext ctx, int index) {
                Manga manga = _listContent[index];
                return new MangaItem(
                  name: manga.writtenName,
                  number: manga.currentNr,
                  state: false,
                );
              }),
          onRefresh: _onRefresh),
       );
    }
}
mwg9r5ms

mwg9r5ms1#

结果发现问题在于

List<Manga> _listContent = new List<Manga>();

是在www.example.com之上定义widget.build,而不是在State类之上定义的。这样定义它可以很好地工作:

class _MyHomePageState extends State<MyHomePage> {
  List<Manga> _listContent = new List<Manga>();

  @override
  Widget build(BuildContext context) {
    ...
  }
wfveoks0

wfveoks02#

我通过调用setState method解决了一个类似的问题(通知框架该对象的内部状态已更改)。
示例如下:https://googleflutter.com/flutter-add-item-to-listview-dynamically/

irtuqstp

irtuqstp3#

您可以将键用于自定义微件

vbopmzt1

vbopmzt14#

我认为谁阅读这个答案尝试更新所有的ListView一次付清的列表,通过用新的替换旧的列表,如果旧的列表在大多数值类似于新的列表,问题就会发生,我暂时用下面的方法解决了这个问题:

setState(() => _currentList.clear());
Future.delayed(const Duration(milliseconds: 50), () {
  setState(() => _currentList.addAll(_newList));
});

您可以在50毫秒内显示CircularProgressIndicator
注意:如果当前列表中的元素与新列表中的元素不相同,并且列表中的元素完全不同,则不会遇到此问题。

相关问题