Flutter ListView不会使用setState()刷新UI,尽管itemCount和附加列表已正确更新

问题描述 投票:4回答:1

我看到很多人遇到非常相似的问题,但是我没有尝试。

上下文

我有一个最喜欢的想法列表。每当我单击ideaItem内的按钮时,都应将其从列表中删除。

问题

[当我删除任何ideaItem时,总是删除屏幕上的最后一个,而不是我单击的那个。我的FavoriteIdeasListView似乎可以正确更新项目计数,这意味着附加的List可以工作,但是UI不会重绘ideaItems。

我尝试过的内容

  • 开始时,我直接在ideaItem上具有删除功能,我读到我应该做一个VoidCallback并处理从List本身的删除,因此它会注意到更改。它没有用

  • 我也尝试过使用Stream Builder,因此流将通知ListView刷新。也没有用

  • 我一直尝试调用SetState,并且不会重新加载,它只会在initialState的开始处构建列表。


    class FavoritesList extends StatefulWidget {
      FavoritesList({Key key}) : super(key: key);

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

    class _FavoritesListState extends State<FavoritesList> {

      List<Idea> _favorites = [];

      @override
      void initState() {
        super.initState();
        favoritesInitialState();
      }

      Future <void> favoritesInitialState() async {
        List<Idea> ideas = await IdeasDB.db.ideas();
        setState(() {
          _favorites = ideas;
        });
      }

      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text('Favorites')),
            body: Center(
              child: ListView.builder(
                itemCount: _favorites.length,
                itemBuilder: (context, index) {
                  final idea = _favorites[index];
                  return IdeaItem(
                    idea: idea,
                    onFavoriteToggle: () => deleteFromFavorites(idea),
                  );
                },
              ),
            )
        );
      }

      void deleteFromFavorites(Idea idea) async {
        await IdeasDB.db.deleteIdea(idea.url);
        List<Idea> newIdeas = await IdeasDB.db.ideas();
        setState(() {
          this._favorites = newIdeas;
        });
      }
    }
listview flutter dart reactive-programming
1个回答
0
投票

我只能看到两个可能的原因。

第一个显而易见,您的IdeasDB.db.deleteIdea(idea.url);并未从数据库中删除正确的想法;

第二个不那么明显,这是因为您的元素树无法识别您要删除的小部件。仅当您的IdeaItem处于状态状态时才发生这种情况。

然后,解决方案是对key小部件使用IdeaItem属性像这样:

ListView.builder(
  itemCount: _favorites.length,
  itemBuilder: (context, index) {
    final idea = _favorites[index];
    return IdeaItem(
      key: ValueKey(idea.url) // or UniqueKey()
      idea: idea,
      onFavoriteToggle: () => deleteFromFavorites(idea),
    );
  },
),

并且在IdeaItem小部件中,您必须将此密钥传递给您的父级Stateful widget,如本例所示:

class IdeaItem extends StatefulWidget {
  final Idea idea;
  Function onFavoriteToggle;

  IdeaItem({Key key, this.idea, this.onFavoriteToggle}) : super(key: key);

  @override
  _IdeaItemState createState() => _IdeaItemState();
}
© www.soinside.com 2019 - 2024. All rights reserved.