A RenderFlex 在底部溢出了 230 像素
[英]A RenderFlex overflowed by 230 pixels on the bottom
問題描述
我一直收到這個錯誤，我知道如何解決它我試過將我的列包裝在一個 Expanded 和一個靈活的小部件中，但它似乎沒有工作。 這是我的代碼：
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),
);
}
如果有人似乎知道答案，請告訴我如何解決此問題，並提前致謝。
2 個解決方案
解決方案1
0 2021-11-16 17:08:06
您只需要將 Column 小部件包裝到 SingleChildScrollView 小部件中，即可擺脫 Column 或 Row 內的 Expanded 和 Flexible 小部件
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),
],
)),
],
),
),
);
解決方案2
0 2021-11-16 17:29:48
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),
],
)),
],
),
);
);
底部像素溢出的 RenderFlex
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.