如何消除 listview.builder 列的颤动中的 RenderFlex 错误?
How to remove the RenderFlex error in flutter for column with listview.builder?
我正在构建 flutter 中的列,如下代码具有嵌套 ListView.Builder,
但是出现了RenderFlex的显示错误,我该如何解决?
A RenderFlex overflowed by 116 pixels on the bottom.
Column(
children: [
SizedBox(height: 25,),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
//order container
Container(
height: 32,
width: 160,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
width:0.5,
color: Color(0xFF766F6F),
),
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text('Order Date',
style: TextStyle(backgroundColor: Colors.white,
color:Color(0xFF2e2a2a),
fontFamily: 'Roboto',
fontSize: 12,
),
),
),
),
Container(
height: 32,
width: 160,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
width:0.5,
color: Color(0xFF766F6F),
),
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text('19 May 2020'),
),
),
],),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Container(
height: 32,
width: 160,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
width:0.5,
color: Color(0xFF766F6F),
),
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text('Party',
style: TextStyle(backgroundColor: Colors.white,
color:Color(0xFF2e2a2a),
fontFamily: 'Roboto',
fontSize: 12,
),),
),
),
Container(
height: 32,
width: 160,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
width:0.5,
color: Color(0xFF766F6F),
),
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text('Vardhman Textiles Ltd', style: TextStyle(backgroundColor: Colors.white,
color:Color(0xFF2e2a2a),
fontFamily: 'Roboto',
fontSize: 12,
),),
),
),
],),
],),
SizedBox(height: 30,),
ListView.separated(
separatorBuilder:
(BuildContext context, int index) {
return SizedBox(
height: 16,
);
},
shrinkWrap: true,
itemCount: snapshot.data.content[key].length,
itemBuilder: (context, index) {
return Column(
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
height: 40,
width: 320,
decoration: BoxDecoration(
color: Color(0xFFFF0000),
border: Border.all(
color: Color(0xFFFF0000),
),
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text('ITEM DETAILS - ' + "1/2",
style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold,
fontFamily: 'Roboto',
fontSize: 20,
),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
// crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Container(
height: 32,
width: 160,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
width:0.5,
color: Color(0xFF766F6F),
),
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text("Catalog Item", style: TextStyle(backgroundColor: Colors.white,
color:Color(0xFF2e2a2a),
fontFamily: 'Roboto',
fontSize: 12,
),
),
),
),
Container(
height: 32,
width: 160,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
width:0.5,
color: Color(0xFF766F6F),
),
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text(snapshot
.data.content[key][index][0].sodPk, style: TextStyle(backgroundColor: Colors.white,
color:Color(0xFF2e2a2a),
fontFamily: 'Roboto',
fontSize: 12,
),
),
),
),
],),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Container(
height: 32,
width: 160,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
width:0.5,
color: Color(0xFF766F6F),
),
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text('QTY.', style: TextStyle(backgroundColor: Colors.white,
color:Color(0xFF2e2a2a),
fontFamily: 'Roboto',
fontSize: 12,
),
),
),
),
Container(
height: 32,
width: 160,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
width:0.5,
color: Color(0xFF766F6F),
),
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text('10', style: TextStyle(backgroundColor: Colors.white,
color:Color(0xFF2e2a2a),
fontFamily: 'Roboto',
fontSize: 12,
),),
),
),
],),
],
),
],
);
},
)
],
)
刚开始学习flutter,请指点一下,谢谢,我正在尝试使用Stack,但不好,
当我使用堆栈时,第一个子列被 listview.builder 重叠,所以将其删除,
请指导解决方法
您可以尝试将 ListView.separated
换成 Expanded Widget
。 expanded 所做的是扩展 Row、Column 或 Flex 的子级,以便子级填充可用 space。所以不会溢出
我正在构建 flutter 中的列,如下代码具有嵌套 ListView.Builder, 但是出现了RenderFlex的显示错误,我该如何解决?
A RenderFlex overflowed by 116 pixels on the bottom.
Column(
children: [
SizedBox(height: 25,),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
//order container
Container(
height: 32,
width: 160,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
width:0.5,
color: Color(0xFF766F6F),
),
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text('Order Date',
style: TextStyle(backgroundColor: Colors.white,
color:Color(0xFF2e2a2a),
fontFamily: 'Roboto',
fontSize: 12,
),
),
),
),
Container(
height: 32,
width: 160,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
width:0.5,
color: Color(0xFF766F6F),
),
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text('19 May 2020'),
),
),
],),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Container(
height: 32,
width: 160,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
width:0.5,
color: Color(0xFF766F6F),
),
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text('Party',
style: TextStyle(backgroundColor: Colors.white,
color:Color(0xFF2e2a2a),
fontFamily: 'Roboto',
fontSize: 12,
),),
),
),
Container(
height: 32,
width: 160,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
width:0.5,
color: Color(0xFF766F6F),
),
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text('Vardhman Textiles Ltd', style: TextStyle(backgroundColor: Colors.white,
color:Color(0xFF2e2a2a),
fontFamily: 'Roboto',
fontSize: 12,
),),
),
),
],),
],),
SizedBox(height: 30,),
ListView.separated(
separatorBuilder:
(BuildContext context, int index) {
return SizedBox(
height: 16,
);
},
shrinkWrap: true,
itemCount: snapshot.data.content[key].length,
itemBuilder: (context, index) {
return Column(
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
height: 40,
width: 320,
decoration: BoxDecoration(
color: Color(0xFFFF0000),
border: Border.all(
color: Color(0xFFFF0000),
),
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text('ITEM DETAILS - ' + "1/2",
style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold,
fontFamily: 'Roboto',
fontSize: 20,
),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
// crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Container(
height: 32,
width: 160,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
width:0.5,
color: Color(0xFF766F6F),
),
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text("Catalog Item", style: TextStyle(backgroundColor: Colors.white,
color:Color(0xFF2e2a2a),
fontFamily: 'Roboto',
fontSize: 12,
),
),
),
),
Container(
height: 32,
width: 160,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
width:0.5,
color: Color(0xFF766F6F),
),
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text(snapshot
.data.content[key][index][0].sodPk, style: TextStyle(backgroundColor: Colors.white,
color:Color(0xFF2e2a2a),
fontFamily: 'Roboto',
fontSize: 12,
),
),
),
),
],),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Container(
height: 32,
width: 160,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
width:0.5,
color: Color(0xFF766F6F),
),
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text('QTY.', style: TextStyle(backgroundColor: Colors.white,
color:Color(0xFF2e2a2a),
fontFamily: 'Roboto',
fontSize: 12,
),
),
),
),
Container(
height: 32,
width: 160,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
width:0.5,
color: Color(0xFF766F6F),
),
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text('10', style: TextStyle(backgroundColor: Colors.white,
color:Color(0xFF2e2a2a),
fontFamily: 'Roboto',
fontSize: 12,
),),
),
),
],),
],
),
],
);
},
)
],
)
刚开始学习flutter,请指点一下,谢谢,我正在尝试使用Stack,但不好, 当我使用堆栈时,第一个子列被 listview.builder 重叠,所以将其删除,
请指导解决方法
您可以尝试将 ListView.separated
换成 Expanded Widget
。 expanded 所做的是扩展 Row、Column 或 Flex 的子级,以便子级填充可用 space。所以不会溢出