[英]Bottom Overflowed By Pixels
I'm trying to add a tab group in the middle of my screen, but I'm getting the Overflowed error.我正在尝试在屏幕中间添加一个选项卡组,但出现溢出错误。
This what I have这就是我所拥有的
Expanded(
child: Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.vertical(
top: Radius.circular(30),
bottom: Radius.circular(0),
),
color: Colors.blueGrey,
),
child: ConstrainedBox(
constraints: BoxConstraints(),
child: DefaultTabController(
length: 3,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
child: TabBar(tabs: [
Tab(text: "Home"),
Tab(text: "Articles"),
Tab(text: "User"),
]),
),
ConstrainedBox(
constraints: BoxConstraints(),
child: Container(
height: MediaQuery.of(context).size.height,
child: TabBarView(children: [
Container(
child: Column(
children: [
Text("Home Body"),
Text("Home Body"),
Text("Home Body"),
Text("Home Body"),
],
),
),
Container(
child: Text("Articles Body"),
),
Container(
child: Text("User Body"),
),
]),
),
),
],
),
),
),
),
),
If I got it right, the error is coming from this line如果我做对了,错误就来自这一行
height: MediaQuery.of(context).size.height,
but how can I sort it without adding a fixed value?但是如何在不添加固定值的情况下对其进行排序? (I assume giving a fixed value depending on the screen size I would have the same error right?)
(我假设根据屏幕尺寸给出一个固定值我会有同样的错误,对吧?)
----------------------------- Update: - - - - - - - - - - - - - - - 更新:
This is what happens when adding leading: Container()
这是添加
leading: Container()
Try the following code:试试下面的代码:
DefaultTabController(
length: 3,
child: Scaffold(
backgroundColor: Colors.blueGrey,
appBar: AppBar(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(
top: Radius.circular(30.0),
bottom: Radius.circular(0.0),
),
),
elevation: 0.0,
backgroundColor: Colors.blueGrey,
bottom: const TabBar(
tabs: [
Tab(text: "Home"),
Tab(text: "Articles"),
Tab(text: "User"),
],
),
),
body: TabBarView(
children: [
Column(
children: const [
Text("Home Body"),
Text("Home Body"),
Text("Home Body"),
Text("Home Body"),
],
),
const Text("Articles Body"),
const Text("User Body"),
],
),
),
),
It is very simple, you must to wrap the colum widget that locate in the TabarView children by the SingleChildScrolView
and set primary: false
,很简单,你必须用
SingleChildScrolView
包装位于 TabaView 子项中的列小部件并设置primary: false
,
Playing around with the elements I found a solution that worked for me:玩弄这些元素,我找到了一个适合我的解决方案:
Expanded(
child: Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.vertical(
top: Radius.circular(30),
bottom: Radius.circular(0),
),
color: Colors.blueGrey,
),
child: DefaultTabController(
length: 3,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const TabBar(tabs: [
Tab(text: "Home"),
Tab(text: "Articles"),
Tab(text: "User"),
]),
Expanded(
child: SizedBox(
height: MediaQuery.of(context).size.height,
child: const TabBarView(children: [
Text("Home Body"),
Text("Articles Body"),
Text("User Body"),
]),
),
),
],
),
),
),
),
],
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.