如何在flutter中的tabcontroller底部添加视图
[英]How to add a view at bottom of tabcontroller in flutter
问题描述
I need to add a view at bottom of Tab Controller like: 
我需要在Tab Controller的底部添加一个视图，例如：
For example: A view in activity which draws over the fragments in tabs. 例如：活动中的视图，它覆盖选项卡中的片段。 Similar view in flutter. 颤振中的类似视图。
I tried adding container or column or row none of them worked. 我尝试添加容器，列或行，但没有一个起作用。 Just showed a blank space. 只是显示了空白。
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Container(
child: DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
title: Text("Project Name"),
bottom: TabBar(tabs: [
Tab(
text: "Status",
),
Tab(
text: "Checking",
)
]),
),
body: new Container(
child: TabBarView(children: [TabDetail1(), TabDetail2()]),
),
)),
));
TabDetails1
class TabDetails1extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return TabDetails1State();
}
}
class TabDetails1State extends State<TabDetails1> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Container(
width: double.infinity,
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(
child: Text(
"Connected To:",
),
margin: const EdgeInsets.fromLTRB(10.0, 10, 0, 0),
),
new Container(
child: Text(
"Equipment Id :",
),
margin: const EdgeInsets.fromLTRB(10.0, 10, 0, 0),
),
new Container(
width: double.infinity,
color: Colors.amberAccent,
margin: EdgeInsets.only(top: 10),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Text("Status"),
margin: EdgeInsets.only(left: 10),
width: 50,
),
new Row(
children: <Widget>[
new Flexible(
child: Container(
width: double.infinity,
child: Text(
"MWM Status",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
),
),
margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
color: Colors.blue,
padding: EdgeInsets.all(10),
),
flex: 1,
),
new Flexible(
child: new Container(
child: new Image.asset('assets/images/and.jpg'),
height: 50,
width: 50,
),
flex: 0,
),
new Flexible(
child: Container(
width: double.infinity,
child: Text(
"Not Connected",
maxLines: 1,
textAlign: TextAlign.center,
),
margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
color: Colors.white,
padding: EdgeInsets.all(10),
height: 40,
),
flex: 1,
)
],
mainAxisAlignment: MainAxisAlignment.spaceBetween,
),
new Row(
children: <Widget>[
Flexible(
child: Container(
width: double.infinity,
child: Text(
"GPRS Status",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white),
),
color: Colors.blue,
padding: EdgeInsets.all(10),
margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
),
flex: 1,
),
Flexible(
child: new Container(
child: new Image.asset('assets/images/and.jpg'),
width: 50,
height: 50,
),
flex: 0,
),
Flexible(
child: Container(
width: double.infinity,
child: Text("GPS Connected"),
margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
color: Colors.white,
padding: EdgeInsets.all(10),
),
flex: 1,
),
],
mainAxisAlignment: MainAxisAlignment.spaceBetween,
),
new Row(
children: <Widget>[
Flexible(
child: Container(
width: double.infinity,
child: Text(
"SIM Status",
style: TextStyle(
color: Colors.white,
),
textAlign: TextAlign.center,
),
margin: EdgeInsets.only(left: 10),
color: Colors.blue,
padding: EdgeInsets.all(10),
height: 40,
),
flex: 1,
),
Flexible(
child: new Container(
margin: EdgeInsets.fromLTRB(10, 0, 0, 0),
child: new Image.asset(
'assets/images/and.jpg',
width: 50,
height: 50,
),
),
fit: FlexFit.tight,
flex: 0,
),
Flexible(
child: Container(
width: double.infinity,
child: Text(
"Not Connected",
maxLines: 1,
textAlign: TextAlign.center,
),
margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
color: Colors.white,
padding: EdgeInsets.all(10),
height: 40,
),
flex: 1,
)
],
mainAxisAlignment: MainAxisAlignment.spaceBetween,
),
new Row(
children: <Widget>[
Flexible(
child: Container(
width: double.infinity,
child: Text(
"RDMS Status",
style: TextStyle(color: Colors.white),
textAlign: TextAlign.center,
),
margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
color: Colors.blue,
padding: EdgeInsets.all(10),
),
flex: 1,
),
Flexible(
child: new Container(
child: new Image.asset('assets/images/and.jpg'),
width: 50,
height: 50,
),
flex: 0,
),
Flexible(
child: Container(
width: double.infinity,
child: Text("Not Connected"),
margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
color: Colors.white,
padding: EdgeInsets.all(10),
),
flex: 1,
),
],
mainAxisAlignment: MainAxisAlignment.spaceBetween,
),
],
),
)
],
mainAxisSize: MainAxisSize.max,
),
);
}
}
So this contains the TabDetails1 where it renders this container. 因此，它包含TabDetails1，在其中渲染此容器。
1 个解决方案
解决方案1
1 已采纳 2019-06-12 11:29:57
I use 'SizedBox' You can see the error as below: 我使用“ SizedBox”，您可以看到以下错误：
I/flutter (20325): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (20325): The following assertion was thrown during performResize():
I/flutter (20325): Horizontal viewport was given unbounded width.
It comes from the code as below: 它来自以下代码：
@override
void performResize() {
assert(() {
if (!constraints.hasBoundedHeight || !constraints.hasBoundedWidth) {
switch (axis) {
case Axis.vertical:
if (!constraints.hasBoundedHeight) {
throw FlutterError(
'Vertical viewport was given unbounded height.\n'
Because the TabBarView does not have hasBoundedHeight . 因为TabBarView没有hasBoundedHeight 。 So, We have to use the SizedBox or AspectRatio what have the limited height with widget. 因此，我们必须使用具有高度限制的小部件的SizedBox或AspectRatio 。 I set 500 as the height of SizedBox . 我将500设置为SizedBox的高度。
This is the full code as following: 这是完整的代码，如下所示：
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
title: Text('Tabs Demo'),
),
body: SizedBox(
height: 500,
child: Column(
children: <Widget>[
Expanded(child:TabBarView(
children: [
TabDetail1(),
TabDetail1(),
TabDetail1(),
]
)),
Container(child: Text("hello", style: TextStyle(fontSize: 50.0)))
]
)
),
)
);
}
Widget TabDetail1(){
return new Container(
width: double.infinity,
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(
child: Text(
"Connected To:",
),
margin: const EdgeInsets.fromLTRB(10.0, 10, 0, 0),
),
new Container(
child: Text(
"Equipment Id :",
),
margin: const EdgeInsets.fromLTRB(10.0, 10, 0, 0),
),
new Container(
width: double.infinity,
color: Colors.amberAccent,
margin: EdgeInsets.only(top: 10),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Text("Status"),
margin: EdgeInsets.only(left: 10),
width: 50,
),
new Row(
children: <Widget>[
new Flexible(
child: Container(
width: double.infinity,
child: Text(
"MWM Status",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
),
),
margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
color: Colors.blue,
padding: EdgeInsets.all(10),
),
flex: 1,
),
new Flexible(
child: new Container(
child: new Image.asset('assets/images/and.jpg'),
height: 50,
width: 50,
),
flex: 0,
),
new Flexible(
child: Container(
width: double.infinity,
child: Text(
"Not Connected",
maxLines: 1,
textAlign: TextAlign.center,
),
margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
color: Colors.white,
padding: EdgeInsets.all(10),
height: 40,
),
flex: 1,
)
],
mainAxisAlignment: MainAxisAlignment.spaceBetween,
),
new Row(
children: <Widget>[
Flexible(
child: Container(
width: double.infinity,
child: Text(
"GPRS Status",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white),
),
color: Colors.blue,
padding: EdgeInsets.all(10),
margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
),
flex: 1,
),
Flexible(
child: new Container(
child: new Image.asset('assets/images/and.jpg'),
width: 50,
height: 50,
),
flex: 0,
),
Flexible(
child: Container(
width: double.infinity,
child: Text("GPS Connected"),
margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
color: Colors.white,
padding: EdgeInsets.all(10),
),
flex: 1,
),
],
mainAxisAlignment: MainAxisAlignment.spaceBetween,
),
new Row(
children: <Widget>[
Flexible(
child: Container(
width: double.infinity,
child: Text(
"SIM Status",
style: TextStyle(
color: Colors.white,
),
textAlign: TextAlign.center,
),
margin: EdgeInsets.only(left: 10),
color: Colors.blue,
padding: EdgeInsets.all(10),
height: 40,
),
flex: 1,
),
Flexible(
child: new Container(
margin: EdgeInsets.fromLTRB(10, 0, 0, 0),
child: new Image.asset(
'assets/images/and.jpg',
width: 50,
height: 50,
),
),
fit: FlexFit.tight,
flex: 0,
),
Flexible(
child: Container(
width: double.infinity,
child: Text(
"Not Connected",
maxLines: 1,
textAlign: TextAlign.center,
),
margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
color: Colors.white,
padding: EdgeInsets.all(10),
height: 40,
),
flex: 1,
)
],
mainAxisAlignment: MainAxisAlignment.spaceBetween,
),
new Row(
children: <Widget>[
Flexible(
child: Container(
width: double.infinity,
child: Text(
"RDMS Status",
style: TextStyle(color: Colors.white),
textAlign: TextAlign.center,
),
margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
color: Colors.blue,
padding: EdgeInsets.all(10),
),
flex: 1,
),
Flexible(
child: new Container(
child: new Image.asset('assets/images/and.jpg'),
width: 50,
height: 50,
),
flex: 0,
),
Flexible(
child: Container(
width: double.infinity,
child: Text("Not Connected"),
margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
color: Colors.white,
padding: EdgeInsets.all(10),
),
flex: 1,
),
],
mainAxisAlignment: MainAxisAlignment.spaceBetween,
),
],
),
)
],
mainAxisSize: MainAxisSize.max,
),
);
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
flutter如何添加底部导航？ - How to add bottom navigator in flutter?
如何在底部导航视图上添加通知徽章？ - How to add notification badge on Bottom Navigation View?
如何在Android抽屉底部添加视图 - How to add a view to the bottom of android drawer
已解决：如何在底部导航视图中添加分隔线 - Solved: How to add dividers in Bottom Navigation View
如何在底部导航视图中添加分隔线 - How to add divider in the bottom navigation view
如何将子菜单添加到底部导航视图 - How to add sub menu into Bottom Navigation View
在视图底部添加阴影 - Add shadow to bottom of view
如何使用视图寻呼机将底视图添加到协调器布局？ - How to add bottom view to a Coordinator Layout with view pager?
flutter：在Scaffold底部添加一个Text - flutter: Add a Text at the bottom of Scaffold
在 Flutter 中为选项卡添加底部边框 - Add bottom border of to tabs in Flutter
相关标签