Question

我正在尝试创建一个包含3个选项卡的主页：“朋友”，“组”和“事件”。在最终设法只为当前用户加载事件后，我意识到为每个选项卡加载不同的数据都很难，因为StreamBuilder流：所有选项卡都将始终相同。

我需要帮助，以找到一种为每个选项卡使用不同的StreamBuilder的方法。下面的代码：


StreamBuilder(
              stream: _streamer(),//Firestore.instance.collection("Events").snapshots(),
              builder: (BuildContext context, AsyncSnapshot<List<dynamic>> snapshot) {
                if (!snapshot.hasData) return const Text("Loading...");
                return new SizedBox(
                    height: MediaQuery.of(context).size.height - 42 - MediaQuery.of(context).padding.bottom -AppBar().preferredSize.height - kToolbarHeight,
                    child: Column(
                      children: <Widget>[
                        Expanded(
                          child: TabBarView(
                            controller: _tabController,
                            children: <Widget>[
                              Container(
                                child: ListView.separated(
                                  itemCount: snapshot.data.length,
                                  itemBuilder: (context, index) =>
                                      _buildListItem(context,
                                          snapshot.data[index]),
                                  separatorBuilder: (context, index) {
                                    return Divider();
                                  },
                                  shrinkWrap: true,
                                ),
                              ),
                              Container(
                                child: ListView.separated(
                                  itemCount: snapshot.data.length,
                                  itemBuilder: (context, index) =>
                                      _buildListItem(context,
                                          snapshot.data[index]),
                                  separatorBuilder: (context, index) {
                                    return Divider();
                                  },
                                  shrinkWrap: true,
                                ),
                              ),
                              Container(
                                child: ListView.separated(
                                  itemCount: snapshot.data.length,
                                  itemBuilder: (context, index) =>
                                      _buildListItem(context,
                                          snapshot.data[index]),
                                  separatorBuilder: (context, index) {
                                    return Divider();
                                  },
                                  shrinkWrap: true,
                                ),
                              ),
                            ],
                          ),
                        )
                      ],
                    ));
              },
            )

This is how the home page looks

Answer 1

我假设您正在使用该流加载所有选项卡所需的所有数据。您可以做的是为每个标签设置不同的流/ StreamBuilder对

：

... // widgets leading up to the TabBarView
TabBarView(
  controller: _controller,
  children: <Widget>[
    StreamBuilder(
          stream: friendsStream,
          builder: (BuildContext context, AsyncSnapshot<SomeData> snapshot)  {
            return FriendsWidget();
          }
   ),
   StreamBuilder(
          stream: groupsStream,
          builder: (BuildContext context, AsyncSnapshot<SomeData> snapshot)  {
            return GroupsWidget();
          }
   ),

//... etc
  ]
)

您还可以只包装应该用StreamBuilder重建的小部件，而不是包装整个父级小部件：

... // widgets leading up to the TabBarView
TabBarView(
  controller: _controller,
  children: <Widget>[
    Column(
       children: <Widget>[
         SomeWidget(),
         AnotherWidget(),
         StreamBuilder(
           stream: friendsStream,
           builder: (BuildContext context, AsyncSnapshot<SomeData> snapshot)  {
             return FriendsWidget();
           }
        )
      ]
    ),
// ... etc
  ]
)

如果被迫一次从数据库中加载所有数据，则可以使用Repository类来加载和存储所有数据，然后根据您的体系结构从该类构建流

作为旁注，我强烈建议将Bloc与BlocBuilder一起使用。 Blocs远远优于其他设计（在大多数情况下）。 flutter_bloc是我的最爱。

TabBarView中的每个选项卡都具有不同的StreamBuilder

1 个答案: