如何更改appBar背景颜色以匹配flutter中不同tabView页面的背景颜色

Question

我正在尝试用appBar、tabBar和3个tabView页面构建一个简单的应用程序结构。这些页面中的每一页都有不同的背景颜色。我希望这个背景色能覆盖整个屏幕(也就是说，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按钮时才会改变，而不是在使用滑动手势在选项卡之间改变时。

如果您能就如何纠正这一问题提供一些指导，我们将不胜感激。非常感谢。

此图显示了3个选项卡屏幕的UI模型

这张图片显示了选项卡1和2之间的转换模型，其中整个背景，包括应用程序栏的背景，在滑动时发生了变化

Answer 1

如果您希望AppBar在颜色变化时具有透明度，可以使用Stack小部件将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'),
],
),
],
)
],
),
),
);

Answer 2

这是因为改变颜色的是这个onTap函数

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:
}
});
},

这就是所谓的敲击手势。下面的代码解决了这个问题

class Home extends StatefulWidget {

@超控_HomeState createState((=&gt_HomeState((；}

class _HomeState extends State<Home> with TickerProviderStateMixin {
Color primaryColor;
TabController _tabController;
TabController _tabControllerA;
@override
void initState() {
super.initState();
_tabController = TabController(
vsync: this,
length: 3,
initialIndex: 0,
);
_tabController.addListener(() {
_handleTabSelection();
});
}
void _handleTabSelection() {
_tabController.index = _tabController.index;
setState(() {
switch (_tabController.index) {
case 0:
primaryColor = Colors.teal[400];
break;
case 1:
primaryColor = Colors.orange[500];
break;
case 2:
primaryColor = Colors.pink[500];
break;
default:
}
});
}
@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,
controller: _tabController,
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: 'home'),
Tab(text: 'another one'),
Tab(text: 'last one'),
],
),
),
body: TabBarView(
controller: _tabController,
children: [
Container(
color: primaryColor,
),
Container(
color: primaryColor,
),
Container(
color: primaryColor,
),
],
),
),
);
}
}

这将工作