时间戳

首页 > 解决方案 > 在页面 {flutter，streambuilder，listview} 之间导航时列表视图位置丢失

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

问题描述

在我的 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]);
              },
            );
        }
      }),
);

标签： androidlistviewfluttergoogle-cloud-firestorestream-builder

解决方案

我想我应该用我如何解决这个问题来更新帖子。

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

key: new PageStorageKey('keying'),

参考：

  1. 密钥管理

  2. 更多信息

推荐阅读