Flutter 应用程序底部带有列的选项卡栏
我正在尝试将选项卡栏放在应用程序的底部 到目前为止，它工作正常，但我无法让页面正常工作（TabBarView）。它看起来很黑，没有反应。选项卡栏也没有响应。我采取了错误的方法吗 目前看来： 代码如下所示：Flutter 应用程序底部带有列的选项卡栏,flutter,tabbar,appbar,Flutter,Tabbar,Appbar,我正在尝试将选项卡栏放在应用程序的底部 到目前为止，它工作正常，但我无法让页面正常工作（TabBarView）。它看起来很黑，没有反应。选项卡栏也没有响应。我采取了错误的方法吗 目前看来： 代码如下所示： import 'package:flutter/material.dart'; void main() => runApp(Bookkeeper()); class Bookkeeper extends StatelessWidget { @override Widget buil
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,
),
),
],
),
),
),
],
);
}
}
我修正了你的密码，看一看
class Bookkeeper extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 4,
child: Scaffold(
appBar: AppBar(
backgroundColor: Color(0xFF3F5AA6),
title: Text("Title text"),
bottom: menu(),
),
body: TabBarView(
children: [
Container(child: Icon(Icons.directions_car)),
Container(child: Icon(Icons.directions_transit)),
Container(child: Icon(Icons.directions_bike)),
Container(child: Icon(Icons.directions_bike)),
],
),
),
),
);
}
Widget menu() {
return TabBar(
tabs: [
Tab(
text: "Transactions",
icon: Icon(Icons.euro_symbol),
),
Tab(
text: "Bills",
icon: Icon(Icons.assignment),
),
Tab(
text: "Balance",
icon: Icon(Icons.account_balance_wallet),
),
Tab(
text: "Options",
icon: Icon(Icons.settings),
),
],
);
}
}
AppBarbottombottomNavigationBar选项卡定位在屏幕底部
class Bookkeeper extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 4,
child: Scaffold(
appBar: AppBar(
backgroundColor: Color(0xFF3F5AA6),
title: Text("Title text"),
),
bottomNavigationBar: menu(),
body: TabBarView(
children: [
Container(child: Icon(Icons.directions_car)),
Container(child: Icon(Icons.directions_transit)),
Container(child: Icon(Icons.directions_bike)),
Container(child: Icon(Icons.directions_bike)),
],
),
),
),
);
}
Widget menu() {
return Container(
color: Color(0xFF3F5AA6),
child: TabBar(
labelColor: Colors.white,
unselectedLabelColor: Colors.white70,
indicatorSize: TabBarIndicatorSize.tab,
indicatorPadding: EdgeInsets.all(5.0),
indicatorColor: Colors.blue,
tabs: [
Tab(
text: "Transactions",
icon: Icon(Icons.euro_symbol),
),
Tab(
text: "Bills",
icon: Icon(Icons.assignment),
),
Tab(
text: "Balance",
icon: Icon(Icons.account_balance_wallet),
),
Tab(
text: "Options",
icon: Icon(Icons.settings),
),
],
),
);
}
}
为什么要在选项卡内部使用容器，选项卡具有图标和文本属性。如果这是一种糟糕的编码样式，请忽略它。主要目的是将tabbar放到底部。我设法做到了，但现在TabBarView不起作用了。嘿，我想把AppBar放在底部，就像我的屏幕截图一样。我就是这样尝试的，但没有成功。实际上是这样的，但是页面没有响应。再次截图：-应该是这样的。谢谢，但是现在标签栏的效果消失了。你是什么意思？你能放个截图吗？我的意思是当你改变页面时，其他图标的不透明度/透明度会改变。这种情况不再发生在您的版本中。此外，所选内容下的行的宽度也不相同。不过就快到了。谢谢你，伙计，我给了你一个正确的答案。我将从那里开始工作。很抱歉，我对这件事不熟悉。