Flutter 嵌套ListView

Question

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

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

讲解视频this

@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(),
                    );
                  ),
                ],
              ),
            ),
          );
        }

Answer 1

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

Answer 2

使用 singlchildscrollview 作为父窗口小部件而不是列参见示例

body: SingleChildScrollView(
    child: Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      Text(
        'Headline',
        style: TextStyle(fontSize: 18),
      ),
      SizedBox(
        height: 200.0,
        child: ListView.builder(
          physics: ClampingScrollPhysics(),
          shrinkWrap: true,
          scrollDirection: Axis.horizontal,
          itemCount: 15,
          itemBuilder: (BuildContext context, int index) => Card(
                child: Center(child: Text('Dummy Card Text')),
              ),
        ),
      ),
      Text(
        'Demo Headline 2',
        style: TextStyle(fontSize: 18),
      ),
      Card(
        child: ListTile(title: Text('Motivation $int'), subtitle: Text('this is a description of the motivation')),
      ),
      Card(
        child: ListTile(title: Text('Motivation $int'), subtitle: Text('this is a description of the motivation')),
      ),
      Card(
        child: ListTile(title: Text('Motivation $int'), subtitle: Text('this is a description of the motivation')),
      ),
      Card(
        child: ListTile(title: Text('Motivation $int'), subtitle: Text('this is a description of the motivation')),
      ),
      Card(
        child: ListTile(title: Text('Motivation $int'), subtitle: Text('this is a description of the motivation')),
      ),
    ],
  ),
)`

Answer 3

您可以像这样使用 CustomScrollView。

     CustomScrollView(
      slivers : [
      SliverToBoxAdapter(child : Container(height : listHeight, 
      child ListView(),),),
      SliverList(delegate: SliverChildBuilderDelegate((context,index){
                        return Your Item;
                      },
                      childCount: data.length
                  ),]

Answer 4

您可以在 Column 之上添加 SingleChildScrollView 以加载整个属性。

然后你可以用这个 在秒 ListView 中停止 scroll code:

ListView(
    physics: NeverScrollableScrollPhysics(),
    shrinkWrap: true, // Edit new line

    .
    .
        ),

在这种情况下，您将有一个 vertical scroll 跟在 SingleChildScrollView 之后，并且页面是完全动画的。

Flutter 嵌套ListView

Flutter nested ListView

listview

nested-lists

flutter