问题描述
我正在尝试制作个人资料页面,其中用户信息位于顶部.然后在其下方有一个选项卡视图,用于不同的视图.
I'm trying to make a profile page, where the users info is at the top. And then have a tab view below that for different views.
这是我目前正在使用的代码,当我将 TabBarView
取出时,它不会出现错误,如果我将 TabBarView
包装在Expanded
错误 RenderFlex 子项具有非零 flex 但传入的高度约束是无界的.
出现.
This is the code I'm using at the moment, when I take the TabBarView
out it doesn't through an error, and if I wrap the TabBarView
in an Expanded
the error RenderFlex children have non-zero flex but incoming height constraints are unbounded.
comes up.
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(''),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.all(10.0),
child: Row(
children: <Widget>[
CircleAvatar(
minRadius: 45.0,
backgroundImage: NetworkImage(
'https://www.ienglishstatus.com/wp-content/uploads/2018/04/Anonymous-Whatsapp-profile-picture.jpg'),
),
Padding(
padding: EdgeInsets.only(left: 10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Testing Name',
style: TextStyle(
fontSize: 22.0,
color: Colors.grey.shade800,
),
),
Text(
'@testing_username',
style: TextStyle(
fontSize: 13.0,
color: Colors.grey.shade800,
),
),
],
),
),
],
),
),
DefaultTabController(
length: 3,
child: Column(
children: <Widget>[
TabBar(
tabs: <Widget>[
Tab(
icon: Padding(
padding: EdgeInsets.all(6.0),
child: Image.asset(
"assets/images/icons/butterlike.png",
color: Colors.grey.shade800,
),
),
),
Tab(
icon: Padding(
padding: EdgeInsets.all(6.0),
child: Image.asset(
"assets/images/icons/butterlike.png",
color: Colors.grey.shade800,
),
),
),
Tab(
icon: Padding(
padding: EdgeInsets.all(6.0),
child: Image.asset(
"assets/images/icons/butterlike.png",
color: Colors.grey.shade800,
),
),
),
],
),
TabBarView(
children: <Widget>[
Container(
color: Colors.grey,
),
Container(
color: Colors.green,
),
Container(
color: Colors.purple,
),
],
),
],
),
)
],
),
);
}
我确实尝试了 this 的变体,但无法正常工作.
I did try a variation of this but couldn't get it to work.
推荐答案
错误描述清楚,TabBarView 没有限制高度.父小部件也没有限制高度.所以,Expanded 小部件并不能解决这个问题.
The error description is clear, the TabBarView doesn't have a bounded height. the parent widget also doesn't have a bounded height. So, the Expanded widget will not solve this issue.
以下解决方案适用于上述问题(带有列).在一般情况下,使用带有 shrinkWrap: true
的 ListView.(或任何其他带有 shrinkWrap 的小部件)
below solutions are for above question(with columns).In general cases, use a ListView with shrinkWrap: true
.(Or any other widgets with shrinkWrap)
有一些选择:
第一种解决方案:
用有限高度的小部件(如 SizedBox 或 AspectRatio)包裹父小部件(列).然后像这样使用 Expanded 小部件:
Wrap the parent widget(Column) with a limited height widget like SizedBox or AspectRatio. Then use the Expanded widget like this:
Expanded(
child: TabBarView(...),
)
第二个解决方案:
在 TabBarView 本身上使用像 SizedBox 或 AspectRatio 这样的有界小部件:
Use a bounded widget like SizedBox or AspectRatio on the TabBarView itself:
SizedBox(
height: 300.0,
child: TabBarView(...),
)
注意如果高度不是静态的,您也可以动态计算高度.
Note Your can also calcuate the height dynamicly if the height is not static.
这篇关于得到“水平视口被赋予了无限的高度."与 TabBarView 一起颤动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!