Flutter中如何改变appBar背景颜色以匹配不同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按钮时才会发生变化，而不是在使用滑动手势在选项卡之间切换时发生变化。

非常感谢您提供有关如何纠正此问题的指导。谢谢。

This image shows a mockup of the UI of the 3 tab screens

This image shows a mockup of the transition between tabs 1 and 2, where the whole background, including that of the app Bar, changes on swipe

Answer 1

如果您希望 AppBar 在颜色更改时透明，您可以使用Stack Widget 将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() => _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,
            ),
          ],
        ),
      ),
    );
  }
}

这会起作用