listview.builder 底部溢出和灵活和扩展小部件的错误
Posted
技术标签:
【中文标题】listview.builder 底部溢出和灵活和扩展小部件的错误【英文标题】:listview.builder bottom overflowing and errors with Flexible and Expanded widgets 【发布时间】:2020-05-08 00:16:41 【问题描述】:我正在尝试构建一个 ListView,但我无法做到让我的列表在不溢出的情况下到达底部,我发现工作的方式是在容器上设置高度,但是,当我使用我的个人设备时我的列表下方有一个很大的空白区域。
我已经在列表之前尝试了灵活和扩展的小部件,但都没有成功,我总是遇到同样的错误:
RenderFlex children have non-zero flex but incoming height constraints are unbounded
Vertical viewport was given unbounded height error
您对此有任何解决方案吗?
@override
Widget build(BuildContext context)
return Scaffold(
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.blueAccent,
title: Padding(
padding: EdgeInsets.only(left: 5.0),
child: Text(
user.name,
style: TextStyle(fontSize: 30.0),
),
),
actions: <Widget>[
IconButton(
alignment: Alignment.center,
icon: Icon(Icons.forward),
onPressed: () ,
),
],
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
color: Colors.blueAccent,
child: Padding(
padding: EdgeInsets.only(top: 30.0, left: 20.0, right: 20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("Conta",
style: TextStyle(fontSize: 17.0, color: Colors.white)),
Divider(color: Colors.blueAccent),
Text("$user.bankAccount / $user.agency",
style: TextStyle(fontSize: 30.0, color: Colors.white)),
Padding(
padding: EdgeInsets.only(top: 30.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("Saldo",
style:
TextStyle(fontSize: 17.0, color: Colors.white)),
Divider(color: Colors.blueAccent),
Text("$user.balance",
style:
TextStyle(fontSize: 30.0, color: Colors.white)),
Divider(color: Colors.blueAccent),
],
),
),
],
),
),
),
Divider(color: Colors.white),
Padding(
padding: EdgeInsets.only(left: 20.0, right: 20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("Recentes",
style: TextStyle(fontSize: 20.0, color: Colors.black)),
FutureBuilder(
future: getuserStatement(user.userId),
builder: getstatements,
),
],
),
),
],
),
);
Future getuserStatement(int id)
return api.getUserExtract(id);
Widget getstatements(BuildContext context, AsyncSnapshot snapshot)
return !snapshot.hasData
? Center(child: CircularProgressIndicator())
: Container(
height: 340,
child: ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (context, index)
print(snapshot.data[index].title);
return Card(
elevation: 5,
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 10.0, left: 10.0),
child: Row(
children: <Widget>[
Text(snapshot.data[index].title),
Expanded(
child: Align(
alignment: Alignment(0.90, 0.00),
child: Text(snapshot.data[index].date),
),
),
],
),
),
Padding(
padding:
EdgeInsets.only(top: 20.0, bottom: 10.0, left: 10.0),
child: Row(
children: <Widget>[
Text(snapshot.data[index].desc),
Expanded(
child: Align(
alignment: Alignment(0.90, 0.00),
child:
Text(snapshot.data[index].value.toString()),
),
),
],
),
)
],
),
);
,
),
);
【问题讨论】:
Expanded
仅在它所在的或 Column
已被赋予固定高度时才有效。将Column
放在ListView
中意味着Column
可以有无限的高度,所以Expanded
不知道它可以扩展多大。
那么,我需要在 listView 中为我的列设置一个固定高度吗?然后在 ListView 之前添加 Expanded 小部件?
【参考方案1】:
解决方案:
在花了这么多时间之后,我找到了解决方案:
我看到在我的这部分代码中,我将另一列放在填充内:
Padding(
padding: EdgeInsets.only(left: 20.0, right: 20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("Recentes",
style: TextStyle(fontSize: 20.0, color: Colors.black)),
Expanded(
child: FutureBuilder(
future: getuserStatement(user.userId),
builder: getstatements,
),
),
],
),
),
所以我所做的只是删除了 Column 并留下了 Text 小部件并将展开的小部件放在填充下方。
Padding(
padding: EdgeInsets.only(left: 20.0, right: 20.0),
child: Text("Recentes",
style: TextStyle(fontSize: 20.0, color: Colors.black)),
),
Expanded(
child: FutureBuilder(
future: getuserStatement(user.userId),
builder: getstatements,
),
),
使用设备的最大空间创建了我的列表,因此我不需要使用 Container 或 sizedBox 设置高度。
在我看来,我认为这是因为我将一个列表放在一个已经在一个列中的 Column 中,所以该列表不知道她有多少空间
【讨论】:
此时,您可以完全删除Expanded
。如果它不是 Row
或 Column
的子代,它什么也不做。以上是关于listview.builder 底部溢出和灵活和扩展小部件的错误的主要内容,如果未能解决你的问题,请参考以下文章
Flutter:我的 Listview.builder 消失在我的固定底部容器下
Flutter - ListView.builder:初始滚动位置
ListView.builder itemCount 未更新