Flutter中垂直滚动视图内的水平ListView [英] Horizontal ListView inside a Vertical ScrollView in Flutter
问题描述
我现在正在尝试实现一种非常常见的行为,即在另一个小部件中同时具有可滚动的水平列表.想想像 IMDb 应用程序的主屏幕:
所以我想要一个可以垂直滚动的小部件,上面有很少的项目.在它的顶部,应该有一个水平的ListView
,然后是一些称为motivationCard
的项目.列表和卡片之间也有一些标题.
我的 Widget
上有类似的东西:
@override小部件构建(BuildContext 上下文)=>BlocBuilder<HomeEvent, HomeState>(块:_homeBloc,builder: (BuildContext 上下文,HomeState 状态) =>脚手架(应用程序栏:应用程序栏(),正文:列(孩子们:<小部件>[文本(Strings.dailyTasks,),ListView.builder(滚动方向:Axis.horizontal,itemCount:tasks.length,itemBuilder: (BuildContext context, int index) =>任务卡(任务编号:索引 + 1,taskTotal:tasks.length,任务:任务[索引],),),文本(Strings.motivations,),动机卡(动机:动机(标题:动机1",描述:'这是对动机的描述'),),动机卡(动机:动机(标题:动机2",描述:'这是对动机的描述'),),动机卡(动机:动机(标题:动机3",描述:'这是对动机的描述'),),],),),);
这是我得到的错误:
I/flutter (23780): ══╡ 渲染库╞═══════════════════════════════════════════════════════════════I/flutter (23780):在 performResize() 期间抛出了以下断言:I/flutter (23780):水平视口的高度没有限制.I/flutter (23780):视口在横轴上扩展以填充其容器并约束其子项以匹配I/flutter (23780):它们在横轴上的范围.在这种情况下,水平视口被赋予了无限量的I/flutter (23780):要扩展的垂直空间.
我试过了:
用
Expanded
小部件包装 ListView用
SingleChildScrollView > 包裹列约束框>内在高度
将
内的 ListCustomScrollView
作为父级,具有SliverList
和SliverChildListDelegate
这些都不起作用,我继续遇到同样的错误.这是一件很常见的事情,应该不难,不知怎的,我就是无法让它工作:(
任何帮助将不胜感激,谢谢!
我认为
更新:
整个页面都可以滚动 - SingleChildScrollView.
body: SingleChildScrollView(孩子:列(mainAxisSize: MainAxisSize.min,孩子们:<小部件>[文本('标题',风格:TextStyle(字体大小:18),),大小盒(高度:200.0,孩子:ListView.builder(物理:ClampingScrollPhysics(),收缩包装:是的,滚动方向:Axis.horizontal,项目数:15,itemBuilder: (BuildContext context, int index) =>卡片(孩子:中心(孩子:文本('虚拟卡片文本')),),),),文本('演示标题 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
widgetWrapping the Column with
SingleChildScrollView > ConstrainedBox > IntrinsicHeight
Having
CustomScrollView
as a parent, with aSliverList
and the List within aSliverChildListDelegate
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中垂直滚动视图内的水平ListView的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!