【发布时间】:2019-01-20 08:08:19
【问题描述】:
我正在尝试将 TabBar 放在应用程序的底部。
到目前为止它工作正常,但我无法让页面工作(TabBarView)。它只是看起来黑色且反应迟钝。 TabBar 也没有响应。我是否采取了错误的方法?
目前看起来是这样的:
代码如下所示:
import 'package:flutter/material.dart';
void main() => runApp(Bookkeeper());
class Bookkeeper extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 4,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
verticalDirection: VerticalDirection.up,
mainAxisSize: MainAxisSize.min,
children: [
AppBar(
backgroundColor: Color(0xFF3F5AA6),
title: Container(
padding: EdgeInsets.only(top: 8.0),
child: menu(),
),
),
TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
Icon(Icons.directions_bike),
],
),
],
),
),
);
}
Widget menu() {
return TabBar(
tabs: [
Tab(
child: Container(
height: 45.0,
child: Column(
children:
[
Icon(Icons.euro_symbol),
Text(
"Transactions",
style: new TextStyle(
height: 1.5,
fontSize: 9.8,
color: Colors.white,
),
),
],
),
),
),
Tab(
child: Container(
height: 45.0,
child: Column(
children:
[
Icon(Icons.assignment),
Text(
"Bills",
style: new TextStyle(
height: 1.5,
fontSize: 9.5,
color: Colors.white,
),
),
],
),
),
),
Tab(
child: Container(
height: 45.0,
child: Column(
children:
[
Icon(Icons.account_balance_wallet),
Text(
"Balance",
style: new TextStyle(
height: 1.5,
fontSize: 9.5,
color: Colors.white,
),
),
],
),
),
),
Tab(
child: Container(
height: 45.0,
child: Column(
children:
[
Icon(Icons.settings),
Text(
"Options",
style: new TextStyle(
height: 1.5,
fontSize: 9.5,
color: Colors.white,
),
),
],
),
),
),
],
);
}
}
【问题讨论】:
-
为什么在Tab里面使用Container,Tab有图标和文字属性
-
嘿,这是不好的编码风格,忽略它。主要目的是将标签栏置于底部。我设法做到了,但现在 TabBarView 不起作用。