首页 > 解决方案 > Flutter 嵌套 ListView

问题描述

我有 2 个ListViews,第一个是页面顶部,显示故事,所以它是horizontal,第二个是显示帖子,所以它是vertical

我想要的是,当scroll我发布帖子时,我希望故事立即消失,它们被卡在页面顶部。

说明视频这个

@override
        Widget build(context) {
          return Scaffold(
          
            body: SafeArea(
              child: Column(
                children: [
                
                Container(
                    padding: EdgeInsets.only(left: 15),
                    height: 90,
                    width: double.infinity,
                    child: StreamBuilder(
                      stream: masterListStart().asStream(),
                      builder: (context, snapshot) {
                    
                          return (ConnectionState.done == snapshot.connectionState)
                              //First Listview
                              ? ListView.builder(
                                  scrollDirection: Axis.horizontal,
                                  shrinkWrap: true,
                                  itemCount: storysList.length,
                                  itemBuilder: (context, index) {
                                    //
                                    StoryItems data = storysList[index];
                                    //
                                    return StoryItems(
                                      data: data,
                                    );
                                  },
                                )
                              : CircularProgressIndicator();
                        }
                      },
                    ),
                  );

                  //Second ListView
                  Expanded(
                    child:  RefreshIndicator(
                      child: ListView(
                        children: posts,
                      ),
                      key: refreshkey,
                      onRefresh: () => refreshlist(),
                    );
                  ),
                ],
              ),
            ),
          );
        }

标签: flutterlistviewnested-lists

解决方案


您可以将您的故事列表视图放在 SliverAppBar 中,当您向上滚动时它会隐藏您的故事列表。这是链接https://flutter.dev/docs/cookbook/lists/floating-app-bar


推荐阅读