如何在flutter中的tabcontroller底部添加视图
我需要在Tab控制器的底部添加一个视图，例如：
例如：活动中的视图，它覆盖了选项卡中的片段。颤抖时类似的视图。
我尝试添加容器，列或行，但没有一个起作用。只是显示了空白。
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,
),
);
}
}
因此，它包含TabDetails1，用于在其中渲染此容器。
1 个答案:
答案 0 :(得分：1)
我使用“ 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.
它来自以下代码：
@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'
因为TabBarView没有hasBoundedHeight。
因此，我们必须使用SizedBox或AspectRatio高度受限的小部件。我将500设置为SizedBox的高度。
这是完整的代码，如下所示：
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,
),
);
}
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？