flutter - 底部溢出 230 像素的 RenderFlex
问题描述
我不断收到此错误,我知道如何解决它我尝试将我的列包装在 Expanded 和 Flexible 小部件中,但它似乎不起作用。这是我的代码:
return Scaffold(
body: Column(
children: [
//To Show Current Date
Container(
height: 30,
margin: EdgeInsets.only(left: 10),
alignment: Alignment.centerLeft,
),
SizedBox(height: 10),
//To show Calendar Widget
Expanded(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
flex : 2,
child: SingleChildScrollView(
child: Center(
child: Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const ListTile(
title: Text(
'MISSIONS',
style: TextStyle(
fontStyle: FontStyle.italic,
fontSize: 20),
textAlign: TextAlign.center,
),
),
],
),
),
),
),
),
Expanded(
flex : 8,
child: SizedBox(
height: 600.0,
child: ListView.builder(
itemCount:
3,
itemBuilder: (BuildContext context, int index) {
// box.put('missionName', missionName);
//box.put("entries",entries);
//var name = box.get('missionName');
//print('Name: $name');
return GestureDetector(
child: Card(
child: Center(
child: Container(
height: 110,
child: Row(
children: <Widget>[
Expanded(
child: Text(
'mission'),
),
SizedBox(height: 30),
Expanded(
child: GestureDetector(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: <Widget>[
// Just a top space
// main content
Container(
child: Stack(
children: <Widget>[
// Box and icons
Stack(
children: <Widget>[
// Box
renderBox(),
// Icons
renderIcons(),
],
alignment: Alignment.bottomCenter,
),
// Button like
renderBtnLike(),
// Icons when jump
// Icon like
whichIconUserChoose == 1 && !isDragging
? Container(
child: Transform.scale(
child: Image.asset(
"images/close.png",
width: 20.0,
height: 20.0,
),
scale: this.zoomIconWhenRelease.value,
),
margin: EdgeInsets.only(
top: processTopPosition(this.moveUpIconWhenRelease.value),
left: this.moveLeftIconLikeWhenRelease.value,
),
)
: Container(),
// Icon love
whichIconUserChoose == 2 && !isDragging
? Container(
child: Transform.scale(
child: Image.asset(
"images/nowork.png",
width: 20.0,
height: 20.0,
),
scale: this.zoomIconWhenRelease.value,
),
margin: EdgeInsets.only(
top: processTopPosition(this.moveUpIconWhenRelease.value),
left: this.moveLeftIconLoveWhenRelease.value,
),
)
: Container(),
// Icon haha
whichIconUserChoose == 3 && !isDragging
? Container(
child: Transform.scale(
child: Image.asset(
"images/sunny.png",
width: 20.0,
height: 20.0,
),
scale: this.zoomIconWhenRelease.value,
),
margin: EdgeInsets.only(
top: processTopPosition(this.moveUpIconWhenRelease.value),
left: this.moveLeftIconHahaWhenRelease.value,
),
)
: Container(),
],
),
margin: EdgeInsets.only(left: 20.0, right: 20.0),
// Area of the content can drag
// decoration: BoxDecoration(border: Border.all(color: Colors.grey)),
width: double.infinity,
),
],
),
),
onHorizontalDragEnd: onHorizontalDragEndBoxIcon,
onHorizontalDragUpdate: onHorizontalDragUpdateBoxIcon,
),
)
],
),
),
),
),
);
}),
),
),
SizedBox(height: 30),
],
)),
],
),
);
这是 renderBtnLike() 小部件:
Widget renderBtnLike() {
return Container(
child: GestureDetector(
onTapDown: onTapDownBtn,
onTapUp: onTapUpBtn,
onTap: onTapBtn,
child: Container(
child: Row(
children: <Widget>[
// Icon like
Expanded(
child: Transform.scale(
child: Transform.rotate(
child: Image.asset(
getImageIconBtn(),
width: 10.0,
height: 10.0,
fit: BoxFit.contain,
color: getTintColorIconBtn(),
),
angle:
!isLongPress ? handleOutputRangeTiltIconLike(tiltIconLikeInBtn2.value) : tiltIconLikeInBtn.value,
),
scale:
!isLongPress ? handleOutputRangeZoomInIconLike(zoomIconLikeInBtn2.value) : zoomIconLikeInBtn.value,
),
),
// Text like
Expanded(
child: Transform.scale(
child: Text(
getTextBtn(),
style: TextStyle(
color: getColorTextBtn(),
fontSize: 8.0,
fontWeight: FontWeight.bold,
),
),
scale:
!isLongPress ? handleOutputRangeZoomInIconLike(zoomIconLikeInBtn2.value) : zoomTextLikeInBtn.value,
),
),
],
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
),
padding: EdgeInsets.all(8.0),
color: Colors.transparent,
),
),
width: 100.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4.0),
color: Colors.white,
border: Border.all(color: getColorBorderBtn()),
),
margin: EdgeInsets.all(20.0),
);
}
如果有人似乎知道答案,请告诉我如何解决这个问题,并提前谢谢你。
解决方案
return Scaffold(
body: singlechildscrollview(
child:Column(
children: [
//To Show Current Date
Container(
height: 30,
margin: EdgeInsets.only(left: 10),
alignment: Alignment.centerLeft,
),
SizedBox(height: 10),
//To show Calendar Widget
Expanded(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
flex : 2,
child: SingleChildScrollView(
child: Center(
child: Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const ListTile(
title: Text(
'MISSIONS',
style: TextStyle(
fontStyle: FontStyle.italic,
fontSize: 20),
textAlign: TextAlign.center,
),
),
],
),
),
),
),
),
Expanded(
flex : 8,
child: SizedBox(
height: 600.0,
child: ListView.builder(
itemCount:
3,
itemBuilder: (BuildContext context, int index) {
// box.put('missionName', missionName);
//box.put("entries",entries);
//var name = box.get('missionName');
//print('Name: $name');
return GestureDetector(
child: Card(
child: Center(
child: Container(
height: 110,
child: Row(
children: <Widget>[
Expanded(
child: Text(
'mission'),
),
SizedBox(height: 30),
Expanded(
child: GestureDetector(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: <Widget>[
// Just a top space
// main content
Container(
child: Stack(
children: <Widget>[
// Box and icons
Stack(
children: <Widget>[
// Box
renderBox(),
// Icons
renderIcons(),
],
alignment: Alignment.bottomCenter,
),
// Button like
renderBtnLike(),
// Icons when jump
// Icon like
whichIconUserChoose == 1 && !isDragging
? Container(
child: Transform.scale(
child: Image.asset(
"images/close.png",
width: 20.0,
height: 20.0,
),
scale: this.zoomIconWhenRelease.value,
),
margin: EdgeInsets.only(
top: processTopPosition(this.moveUpIconWhenRelease.value),
left: this.moveLeftIconLikeWhenRelease.value,
),
)
: Container(),
// Icon love
whichIconUserChoose == 2 && !isDragging
? Container(
child: Transform.scale(
child: Image.asset(
"images/nowork.png",
width: 20.0,
height: 20.0,
),
scale: this.zoomIconWhenRelease.value,
),
margin: EdgeInsets.only(
top: processTopPosition(this.moveUpIconWhenRelease.value),
left: this.moveLeftIconLoveWhenRelease.value,
),
)
: Container(),
// Icon haha
whichIconUserChoose == 3 && !isDragging
? Container(
child: Transform.scale(
child: Image.asset(
"images/sunny.png",
width: 20.0,
height: 20.0,
),
scale: this.zoomIconWhenRelease.value,
),
margin: EdgeInsets.only(
top: processTopPosition(this.moveUpIconWhenRelease.value),
left: this.moveLeftIconHahaWhenRelease.value,
),
)
: Container(),
],
),
margin: EdgeInsets.only(left: 20.0, right: 20.0),
// Area of the content can drag
// decoration: BoxDecoration(border: Border.all(color: Colors.grey)),
width: double.infinity,
),
],
),
),
onHorizontalDragEnd: onHorizontalDragEndBoxIcon,
onHorizontalDragUpdate: onHorizontalDragUpdateBoxIcon,
),
)
],
),
),
),
),
);
}),
),
),
SizedBox(height: 30),
],
)),
],
),
);
);
推荐阅读
- couchbase - Couchbase - 获取所有文档前缀
- php - 使用 orWhere 与 eloquent
- json - 使用 React 从 JSON 获取数据给出空白页面
- python - 有没有什么时候最好将同一个列表切片两次?
- error-correction - 为什么 CCSDS 推荐的 BCH 纠错多项式不适用于 bchlib?
- javascript - Google App Script 使用 if/else 条件语句在循环中添加 180 天
- python - 程序激活错误的谷歌云平台项目
- perl - 为什么 Perl pos() 总是返回 undef?
- python - 如何忽略输入键/将其视为 Python 中的空格键?
- javascript - 在问答游戏中基于使用对象数组选择正确答案来增加分数