listview.builder 灵活和扩展小部件底部溢出和错误
listview.builder bottom overflowing and errors with Flexible and Expanded widgets
我正在尝试构建一个 ListView,但我无法做到这一点,我的列表在不溢出的情况下触及底部,我发现工作的方式是在容器上设置高度,但是,当我使用我的个人设备 我的列表下方有一个大大的白色 space。
我已经在列表之前尝试过灵活和扩展的小部件,但都没有用,我总是得到同样的错误:
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()),
),
),
],
),
)
],
),
);
},
),
);
}
}
解法:
在花了这么多时间之后,我找到了解决方案:
我看到在我的这部分代码中,我将另一列放在填充内:
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,
),
),
],
),
),
所以我所做的是,删除列并保留文本小部件并将展开的小部件放在填充下方。
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,
),
),
用设备的最大值 space 创建了我的列表,这样我就不需要使用 Container 或 sizedBox 设置高度。
在我看来,我认为发生这种情况是因为我将一个列表放在一个列中,而该列已经在一个列中,所以该列表不知道她有多少space
我正在尝试构建一个 ListView,但我无法做到这一点,我的列表在不溢出的情况下触及底部,我发现工作的方式是在容器上设置高度,但是,当我使用我的个人设备 我的列表下方有一个大大的白色 space。
我已经在列表之前尝试过灵活和扩展的小部件,但都没有用,我总是得到同样的错误:
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()),
),
),
],
),
)
],
),
);
},
),
);
}
}
解法:
在花了这么多时间之后,我找到了解决方案:
我看到在我的这部分代码中,我将另一列放在填充内:
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,
),
),
],
),
),
所以我所做的是,删除列并保留文本小部件并将展开的小部件放在填充下方。
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,
),
),
用设备的最大值 space 创建了我的列表,这样我就不需要使用 Container 或 sizedBox 设置高度。
在我看来,我认为发生这种情况是因为我将一个列表放在一个列中,而该列已经在一个列中,所以该列表不知道她有多少space