我试图建立一个简单的应用程序结构的appBar，tabBar和3tabView页。这些页面中的每一个都有不同的背景颜色。我希望这种背景色可以覆盖整个屏幕（即，AppBar也要占用的空间）。因此，我需要在用户在选项卡之间切换时更改AppBar的颜色。
这是我走了多远：
import 'package:flutter/material.dart';
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
Color PrimaryColor = Colors.teal[400];
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
elevation: 0,
backgroundColor: PrimaryColor,
bottom: TabBar(
isScrollable: false,
indicatorColor: Colors.white,
indicatorWeight: 5,
onTap: (index) {
setState(() {
switch (index) {
case 0:
PrimaryColor = Colors.teal[400];
break;
case 1:
PrimaryColor = Colors.orange[500];
break;
case 2:
PrimaryColor = Colors.pink[500];
break;
default:
}
});
},
tabs: [
Tab(text: ''),
Tab(text: ''),
Tab(text: ''),
],
)),
body: TabBarView(
children: [
Container(
color: Colors.teal[400],
),
Container(
color: Colors.orange[500],
),
Container(
color: Colors.pink[500],
),
],
),
),
);
}
}
这几乎可以实现我想要的UI，但是仅当tabBar按下按钮时背景才会改变，而在选项卡之间使用滑动手势时不会改变背景。
非常感谢您提供一些纠正方法的指导。谢谢。
如果您希望在颜色改变时在AppBar中保持透明，可以使用StackWidget来放置TabBar以上页面：
DefaultTabController(
length: 3,
child: Scaffold(
body: Stack(
alignment: Alignment.topCenter,
children: [
TabBarView(
children: [
Container(
padding: const EdgeInsets.only(top: 132.0), //note that without this padding the content of the page will apear behind the TabBar
color: Colors.teal[400],
),
Container(
color: Colors.orange[500],
),
Container(
color: Colors.pink[500],
),
],
),
Column(
children: [
SizedBox(height: 50.0),
Text(
'Title', //A text to represent the title of the image
textAlign: TextAlign.center,
style: TextStyle(fontSize: 30.0, color: Colors.white),
),
TabBar(
isScrollable: false,
indicatorColor: Colors.white,
indicatorWeight: 5,
onTap: (index) {},
tabs: [
Tab(text: 'Home'),
Tab(text: 'Groups'),
Tab(text: 'Profile'),
],
),
],
)
],
),
),
);
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句