我正在尝试实现一个非常常见的行为,现在这是有一个横向列表中的另一个小部件,在同一时间滚动。想象一下IMDb应用程序的主屏幕:
因此,我想有一个小部件,滚动垂直与他们的几个项目。在它的顶部,应该有一个水平的ListView
,然后是一些名为motivationCard
的项目。在列表和卡片之间也有一些标题。
我在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'),
),
],
),
),
);
这是我得到的错误:
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.
我试过:
- 使用
Expanded
小部件 Package ListView - 使用
SingleChildScrollView > ConstrainedBox > IntrinsicHeight
Package 列 - 父节点为
CustomScrollView
,SliverList
和SliverChildListDelegate
中的List
这些都不起作用,我继续得到同样的错误。这是一个非常常见的事情,不应该有任何困难,不知何故,我只是不能让它工作:(
任何帮助将不胜感激,谢谢!
编辑:
我以为this可以帮助我,但它没有。
9条答案
按热度按时间a7qyws3x1#
好吧,你的代码工作正常,用
Expanded
Widget Package 你的-ListView.builder
并设置Column
Widget的mainAxisSize: MainAxisSize.min,
。E.x代码你所拥有的。
更新:
使用-
SingleChildScrollView.
可滚动整个页面ifsvaxew2#
截图:
6ojccjat3#
我们必须在另一个
SingleScrollView
中使用SingleScrollView
,使用ListView
将需要固定的高度yhuiod9q4#
如果有人得到renderview端口被超出错误。扭曲容器小部件中的ListView,并给予其height和width属性以解决此问题
kt06eoxx5#
我尝试在此代码,我修复了我的问题,我希望解决你想要它.
g6ll5ycj6#
对于Web Chome,你必须添加MaterialScrollBehavior才能水平滚动。see(Horizontal listview not scrolling on web but scrolling on mobile)我演示了如何使用scrollcontroller来左右移动列表。
btxsgosb7#
你只需要固定你的
Listview
的高度(例如,通过将它 Package 在SizedBox
中)。这是因为在绘制框架之前无法知道列表视图的内容。想象一下一张有几百个项目的清单。没有办法直接知道它们中的最大高度。
cgfeq70w8#
使用Builder在垂直列表视图中添加水平列表视图
没有一个答案被证明可以解决我的问题,即在垂直ListView中有一个水平ListView,同时仍然使用ListBuilder(这比简单地一次呈现所有子元素更高效)。
结果很简单。只需将垂直列表的子列表 Package 在Column中,并检查index是否为0(或
index % 3 == 0
),然后呈现水平列表。似乎工作得很好:
ioekq8ef9#
试试物理学:BouncingScrollPhysics()
如果您在ListView -垂直滚动中使用ListView -水平滚动,则可能会导致子ListView过度滚动的问题。在这种情况下,我使用的是
physics: BouncingScrollPhysics()
的子ListView,它提供了一个很好的弹跳滚动效果,并解决了我的错误