在页面 flutter，streambuilder，listview 之间导航时列表视图位置丢失

Posted 2023-02-23

【中文标题】在页面 flutter，streambuilder，listview 之间导航时列表视图位置丢失

【英文标题】：Listview position lost while navigating between pages flutter, streambuilder, listview在页面 flutter，streambuilder，listview 之间导航时列表视图位置丢失

【发布时间】：2019-06-14 02:04:38

【问题描述】：

在我的 Flutter 应用程序中，我正在尝试实现一个 listview，它将数据作为流从 Firestore 集合中获取。大部分都按预期工作 - 我可以将 Firestore 文档详细信息推送到下一页（详细信息页面），但是在返回主页时，应用程序不记得列表视图的位置 - 可能是因为它是一个流？

我需要您的帮助和意见来帮助我实现目标吗？下面是代码供参考：

尝试使用AutomaticKeepAliveClientMixin；仍然没有得到预期的结果。

我期待在有状态小部件中实现键来管理状态

Widget build(BuildContext context) 
    ListTile makeListTile(DocumentSnapshot document) => ListTile(
          contentPadding:
              EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),

      leading: Container(
        padding: EdgeInsets.only(right: 12.0),
        decoration: new BoxDecoration(
            border: new Border(
                right: new BorderSide(width: 1.0, color: Colors.white24))),
        child: Icon(Icons.notifications_active, color: Colors.white),
      ),
      title: Text(
        document['title'],
        style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
      ),
      subtitle: Text(document['shortDesc'].toString(),
          style: TextStyle(color: Colors.white)),

      trailing:
          Icon(Icons.keyboard_arrow_right, color: Colors.white, size: 30.0),
      onTap: () 
        Navigator.of(context).push(new MaterialPageRoute(
                builder: (context) => NewsDetails(document: document)));
      ,
    );

final topAppBar = AppBar(
  elevation: 0.1,
  backgroundColor: Colors.teal,
  title: Text('FirestoreDemo'),
    centerTitle: true,
);

Card makeCard(DocumentSnapshot document) => Card(
      elevation: 8.0,
      margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
      child: Container(
        decoration: BoxDecoration(color: Colors.teal),
        child: makeListTile(document),
      ),
    );

Card makeUnreadCard(DocumentSnapshot document) => Card(
      elevation: 8.0,
      margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
      child: Container(
        decoration: BoxDecoration(color: Colors.deepOrangeAccent),
        child: makeListTile(document),
      ),
    );

return new Scaffold(
  appBar: topAppBar,
  drawer: new MainDrawer(labels: widget.labels),
  body: new StreamBuilder<QuerySnapshot>(
      stream: Firestore.instance
          .collection('collecton01')
          .orderBy('date', descending: true)
          .snapshots(),
      builder:
          (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) 

            if (!snapshot.hasData)
            return Center(child: CircularProgressIndicator(),);
        if (snapshot.hasError) return Center (child:new Text('Error: $snapshot.error'));
        final int itemsCount = snapshot.data.documents.length;
        switch (snapshot.connectionState) 
          case ConnectionState.waiting:
            return new CircularProgressIndicator();
          default:
            return new ListView.builder(
              scrollDirection: Axis.vertical,
              controller: _scrollController,

              shrinkWrap: true,
              itemCount: itemsCount,
              itemBuilder: (BuildContext context, int index) 
                final DocumentSnapshot document =
                    snapshot.data.documents[index];

                if (document['color'] == true) 
                  return makeUnreadCard(snapshot.data.documents[index]);
                
                return makeCard(snapshot.data.documents[index]);
              ,
            );
        
      ),
);

【参考方案1】：

认为我应该更新帖子，说明我是如何解决问题的。

我在流构建器内的列表视图中添加了一个关键属性，现在问题已解决：

key: new PageStorageKey('keying'),

参考：

Key management

Further more info