Flutter 中垂直 ScrollView 内的水平 ListView [英] Horizontal ListView inside a Vertical ScrollView in Flutter

问题描述

我现在正试图实现一个非常常见的行为，即在另一个同时可滚动的小部件中拥有一个水平列表.想想像 IMDb 应用程序的主屏幕:

所以我想要一个垂直滚动的小部件，上面有几个项目.在它的顶部，应该有一个水平的 ListView，后面是一些叫做 motivationCard 的项目.列表和卡片之间也有一些标题.

我的 Widget 上有类似的东西:

@override小部件构建(BuildContext 上下文)=>BlocBuilder(块:_homeBloc，builder: (BuildContext context, HomeState state) =>脚手架(应用栏:应用栏()，正文:列(孩子们:<小部件>[文本(Strings.dailyTasks,),ListView.builder(滚动方向:Axis.horizo​​ntal，itemCount:tasks.length，itemBuilder: (BuildContext context, int index) =>任务卡(任务编号:索引 + 1，taskTotal:tasks.length，任务:任务[索引]，),),文本(Strings.motivations,),动机卡(动机:动机(title: '动机 1',描述:'这是对动机的描述')，),动机卡(动机:动机(title: '动机 2',描述:'这是对动机的描述')，),动机卡(动机:动机(title: '动机 3',描述:'这是对动机的描述')，),],),),);

这是我得到的错误:

I/flutter (23780):==╡ 渲染库异常捕获 ╞=========================＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝I/flutter (23780):在 performResize() 期间抛出以下断言:I/flutter (23780):水平视口被赋予无限的高度.I/flutter (23780):视口在横轴上扩展以填充其容器并约束其子项以匹配I/flutter (23780):它们在横轴上的范围.在这种情况下，水平视口被赋予无限量I/flutter (23780):要扩展的垂直空间.

我试过了:

• 使用 Expanded 小部件包装 ListView

• 用 SingleChildScrollView > 包裹列约束框内在高度

• 将 CustomScrollView 作为父级，具有 SliverList 和 SliverChildListDelegate

  中的 List

这些都不起作用，我继续遇到同样的错误.这是一件很常见的事情，不应该很难，不知何故我就是无法让它工作:(

任何帮助将不胜感激，谢谢！

我认为

更新:

整个页面都可以滚动 - SingleChildScrollView.

body: SingleChildScrollView(孩子:列(mainAxisSize: MainAxisSize.min,孩子们:<小部件>[文本('标题'，样式:TextStyle(字体大小:18)，),大小盒(高度:200.0，孩子:ListView.builder(物理:ClampingScrollPhysics(),收缩包装:真实，滚动方向:Axis.horizo​​ntal，itemCount: 15,itemBuilder: (BuildContext context, int index) =>卡片(child: 中心(child: Text('Dummy Card Text')),),),),文本('演示标题 2',样式:TextStyle(字体大小:18)，),卡片(child: ListTile(title: Text('Motivation $int'), subtitle: Text('这是对动机的描述')),),卡片(child: ListTile(title: Text('Motivation $int'), subtitle: Text('这是对动机的描述')),),卡片(child: ListTile(title: Text('Motivation $int'), subtitle: Text('这是对动机的描述')),),卡片(child: ListTile(title: Text('Motivation $int'), subtitle: Text('这是对动机的描述')),),卡片(child: ListTile(title: Text('Motivation $int'), subtitle: Text('这是对动机的描述')),),],),),

I am trying to achieve a very common behavior nowadays which is to have a horizontal List within another widget that is at the same time scrollable. Think something like the home screen of the IMDb app:

So I want to have a widget that scrolls vertically with few items on them. At the top of it, there should be a horizontal ListView, followed up with some items called motivationCard. There are some headers in between the list and the cards as well.

I got something like this on my Widget:

@override
  Widget build(BuildContext context) => BlocBuilder<HomeEvent, HomeState>(
        bloc: _homeBloc,
        builder: (BuildContext context, HomeState state) => Scaffold(
              appBar: AppBar(),
              body: Column(
                children: <Widget>[
                  Text(
                    Strings.dailyTasks,
                  ),
                  ListView.builder(
                    scrollDirection: Axis.horizontal,
                    itemCount: tasks.length,
                    itemBuilder: (BuildContext context, int index) =>
                        taskCard(
                          taskNumber: index + 1,
                          taskTotal: tasks.length,
                          task: tasks[index],
                        ),
                  ),
                  Text(
                    Strings.motivations,
                  ),
                  motivationCard(
                    motivation: Motivation(
                        title: 'Motivation 1',
                        description:
                        'this is a description of the motivation'),
                  ),
                  motivationCard(
                    motivation: Motivation(
                        title: 'Motivation 2',
                        description:
                        'this is a description of the motivation'),
                  ),
                  motivationCard(
                    motivation: Motivation(
                        title: 'Motivation 3',
                        description:
                        'this is a description of the motivation'),
                  ),
                ],
              ),
            ),
      );

this is the error I get:

I/flutter (23780): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (23780): The following assertion was thrown during performResize():
I/flutter (23780): Horizontal viewport was given unbounded height.
I/flutter (23780): Viewports expand in the cross axis to fill their container and constrain their children to match
I/flutter (23780): their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of
I/flutter (23780): vertical space in which to expand.

I have tried:

• Wrapping the ListView with an Expanded widget

• Wrapping the Column with SingleChildScrollView > ConstrainedBox > IntrinsicHeight

• Having CustomScrollView as a parent, with a SliverList and the List within a SliverChildListDelegate

None of these work and I continue getting the same kind of error. This is a very common thing and shouldn't be any hard, somehow I just cannot get it to work :(

Any help would be much appreciated, thanks!

Edit:

I thought this could help me but it didn't.

解决方案

Well, Your Code Work Fine with wrapping your- ListView.builder with Expanded Widget & setting mainAxisSize: MainAxisSize.min, of Column Widget.

E.x Code of what you Have.

 body: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Text(
            'Headline',
            style: TextStyle(fontSize: 18),
          ),
          Expanded(
            child: ListView.builder(
              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),
          ),
          Expanded(
            child: ListView.builder(
              shrinkWrap: true,
              itemBuilder: (ctx,int){
                return Card(
                  child: ListTile(
                      title: Text('Motivation $int'),
                      subtitle: Text('this is a description of the motivation')),
                );
              },
            ),
          ),
        ],
      ),

Update:

Whole page Is Scroll-able with - SingleChildScrollView.

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')),
      ),
    ],
  ),
),

这篇关于Flutter 中垂直 ScrollView 内的水平 ListView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！