如何在 Flutter 中让 ListView 中的项目覆盖整个屏幕
Posted
技术标签:
【中文标题】如何在 Flutter 中让 ListView 中的项目覆盖整个屏幕【英文标题】:How to have an item in ListView cover to whole screen in Flutter 【发布时间】:2019-08-28 09:47:21 【问题描述】:我想要一个具有固定数量项目的可滚动视图。第一个项目应该覆盖父容器,然后用户可以向下滚动以查看其余项目。
我尝试将 Expanded 添加到第一项,但我得到白屏
ListView(
children: <Widget>[
Expanded(child: MainInfo(),),
Divider(height: 2, color: Colors.black,),
MainInfo(),
Divider(height: 2, color: Colors.black,),
MainInfo(),
Divider(height: 2, color: Colors.black,),
MainInfo(),
Divider(height: 2, color: Colors.black,),
MainInfo(),
],
),
我应该使用 ListView 还是 SingleChildScrollView(也不适用于 Expanded)?
【问题讨论】:
【参考方案1】:我已经设法通过使用返回 ListView 的 LayoutBuilder 来实现这一点
LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints)
return ListView(
children: <Widget>[
Container(
child: MainInfo(),
height: constraints.maxHeight,
),
Divider(
height: 2,
color: Colors.black,
),
MainInfo(),
Divider(
height: 2,
color: Colors.black,
),
MainInfo(),
Divider(
height: 2,
color: Colors.black,
),
MainInfo(),
Divider(
height: 2,
color: Colors.black,
),
MainInfo(),
],
);
),
【讨论】:
【参考方案2】:Expanded 不能在可滚动小部件中使用。你可以这样做:
ListView(
children: <Widget>[
Container(height:MediaQuery.of(context).size.height,child: MainInfo(),),
Divider(height: 2, color: Colors.black,),
MainInfo(),
Divider(height: 2, color: Colors.black,),
MainInfo(),
Divider(height: 2, color: Colors.black,),
MainInfo(),
Divider(height: 2, color: Colors.black,),
MainInfo(),
],
),
【讨论】:
如果我在列表视图或 AppBar 下有一个小部件怎么办?将高度设置为 MediaQuery 的高度将溢出屏幕的第一项。我也编辑了问题以减少混淆以上是关于如何在 Flutter 中让 ListView 中的项目覆盖整个屏幕的主要内容,如果未能解决你的问题,请参考以下文章
如何在 Flutter 中添加 ListView.builder 的填充顶部?