Flutter 如何更改appBar背景色以匹配Flatter中不同tabView页面的背景色？

我正在尝试用

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

导入“包装：颤振/材料.省道”；
类Home扩展了StatefulWidget{
@凌驾
_HomeState createState（）=>\u HomeState（）；
}
类(HomeState扩展状态){
Color PrimaryColor=Colors.teal[400]；
@凌驾
小部件构建（构建上下文）{
返回DefaultTabController(
长度：3，
孩子：脚手架(
appBar:appBar(
海拔：0，
背景色：原色，
底部：选项卡栏(
isScrollable:错误，
指示颜色：颜色。白色，
指标重量：5，
onTap：（索引）{
设置状态（）{
开关（索引）{
案例0：
PrimaryColor=Colors.teal[400]；
打破
案例1：
PrimaryColor=颜色。橙色[500]；
打破
案例2：
PrimaryColor=颜色。粉红色[500]；
打破
违约：
}
});
},
选项卡：[
选项卡（文本：“”），
选项卡（文本：“”），
选项卡（文本：“”），
],
)),
正文：选项卡视图(
儿童：[
容器(
颜色：Colors.teal[400]，
),
容器(
颜色：颜色。橙色[500]，
),
容器(
颜色：颜色。粉红色[500]，
),
],
),
),
);
}
}

这几乎实现了我想要的UI，但是背景只有在按下

选项卡栏

按钮时才会改变，而不是在使用滑动手势在选项卡之间改变时

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

---

这是因为改变颜色的是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（）=>\u HomeState（）； }

class\u HomeState使用TickerProviderStateMixin扩展状态{
原色；
TabController\u TabController；
TabController\u tabControllerA；
@凌驾
void initState（）{
super.initState（）；
_tabController=tabController(
vsync:这个,，
长度：3，
初始索引：0，
);
_tabController.addListener（（）{
_handleTabSelection（）；
});
}
void_handletabs选举（）{
_tabController.index=\u tabController.index；
设置状态（）{
开关（选项卡控制器索引）{
案例0：
primaryColor=Colors.teal[400]；
打破
案例1：
primaryColor=颜色。橙色[500]；
打破
案例2：
primaryColor=颜色。粉红色[500]；
打破
违约：
}
});
}
@凌驾
小部件构建（构建上下文）{
返回DefaultTabController(
长度：3，
孩子：脚手架(
appBar:appBar(
海拔：0，
背景色：原色，
底部：选项卡栏(
isScrollable:错误，
指示颜色：颜色。白色，
指标重量：5，
控制器：\ tab控制器，
onTap：（索引）{
设定状态(
() {
开关（索引）{
案例0：
primaryColor=Colors.teal[400]；
打破
案例1：
primaryColor=颜色。橙色[500]；
打破
案例2：
primaryColor=颜色。粉红色[500]；
打破
违约：
}
},
);
},
选项卡：[
选项卡（文本：“主页”），
选项卡（文本：“另一个”），
选项卡（文本：“最后一个”），
],
),
),
正文：选项卡视图(
控制器：\ tab控制器，
儿童：[
容器(
颜色：原色，
),
容器(
颜色：原色，
),
容器(
颜色：原色，
),
],
),
),
);
}
}

---

这将起作用

如果在颜色更改时希望AppBar透明，则可以使用

堆栈

小部件将

选项卡栏

放置在页面上方：

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'),
              ],
            ),
          ],
        )
      ],
    ),
  ),
);

---

“你能给我们一张你想要达到的目标的图片吗？”yahyaparvar按要求补充道，谢谢。我认为我的解决方案符合你的要求！非常感谢，这很有效perfectly@The为了阻止页面内容位于选项卡栏后面而插入的填充，尽管是硬编码大小，但这会在设备之间产生响应吗？我在手机和平板电脑上进行了测试，结果是一样的，硬代码从来都不是最好的选择，但是现在我没有其他的解决方案。谢谢你的关注。这段代码似乎不会产生与我的原始代码不同的效果？

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'),
              ],
            ),
          ],
        )
      ],
    ),
  ),
);