[英]“A RenderFlex overflowed by 60 pixels on the bottom” error on flutter
所以,我正在尝试制作一个像这样的页面,但现在我遇到了溢出错误:
我在网上看到有人使用SingleChildScrollView
解决了这个问题,但上面的文章使用NestedScrollView
来使用条子,所以我不知道该怎么做。
由于下面的错误,我还尝试将Extended
放在所有地方,但没有任何效果。
代码是这样的:(完整代码在我的 github上可用)
return Scaffold(
appBar: AppBar(
elevation: 0.0,
backgroundColor: Color(0x00ffffff),
title: Text('Account'),
),
body: DefaultTabController(
length: 2,
child: RefreshIndicator(
onRefresh: getArtistImage,
key: _refreshIndicatorKey,
child: NestedScrollView(
headerSliverBuilder: (context, _) {
return [
SliverList(
delegate: SliverChildListDelegate([
Column(
children: <Widget>[
!loaded
? SafeArea(
top: true,
child: Column(
children: <Widget>[
Container(
child: LinearProgressIndicator(
backgroundColor: whiteLoadingBackground,
valueColor: AlwaysStoppedAnimation(
Colors.white60),
),
height: 3,
),
UserProfile(widget.user, recentTracks)
],
),
)
: Container(
child: Stack(
children: <Widget>[
Container(
height: MediaQuery
.of(context)
.size
.width,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0x56000000),
Color(0x88000000),
Color(0xff000000)
],
begin: FractionalOffset.topCenter,
end: AlignmentDirectional.bottomCenter,
)),
),
PageModel(
title: 'My Account',
children: UserProfile(
widget.user, recentTracks))
],
),
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(artistImage),
alignment: Alignment.topCenter,
fit: BoxFit.fitWidth),
))
],
),
]),
)
];
},
physics:
AlwaysScrollableScrollPhysics(parent: BouncingScrollPhysics()),
body: Column(
children: <Widget>[
TabBar(
tabs: <Widget>[
Tab(
text: 'Last Scrobbles',
icon: Icon(Icons.queue_music),
),
Tab(
text: 'Charts',
icon: Icon(Icons.show_chart),
)
],
),
Expanded(
child: TabBarView(
children: <Widget>[
recentTracks != null
? Container(
child: UserBottomInformation(
widget.user, recentTracks),
)
: Text('ue'),
Text('pag 2')
],
),
)
],
),
),
),
),
);
在显示TabBar
和TabBarView
的列内,您只是用Expanded
包装TabBarView
而您应该做的是用Expanded
包装两个子项并为每个子项指定一个弹性因子(弹性因子将决定给予该列的空间百分比每个孩子会占用)像这样:
Column(
children: <Widget>[
Expanded(
flex: ,//some value here
child: TabBar(
tabs: <Widget>[
Tab(
text: 'Last Scrobbles',
icon: Icon(Icons.queue_music),
),
Tab(
text: 'Charts',
icon: Icon(Icons.show_chart),
)
],
),
),
Expanded(
flex: ,//some value here
child: TabBarView(
children: <Widget>[
recentTracks != null
? Container(
child: UserBottomInformation(
widget.user, recentTracks),
)
: Text('ue'),
Text('pag 2')
],
),
)
],
);
Column(
children:<Widget>[
Flexible(child:put your child here),
Flexible(child:put your child here),
Flexible(child:put your child here),
..,
]
)
考虑使用Flexible
小部件的flex:
属性,如果这是可滚动的,则告诉孩子应该消耗多少可用空间,只需将 Column 包装在SingleChildScrollView
中
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.