flutter中如何改变appBar的背景色来匹配不同tabView页面的背景色？

Question

我正在尝试构建一个包含 appBar、tabBar 和 3 个 tabView 页面的简单应用程序结构。这些页面中的每一个都将具有不同的背景颜色。我希望这种背景颜色能够覆盖整个屏幕（即 space 也被 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

这是因为改变颜色的是这个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,
            ),
          ],
        ),
      ),
    );
  }
}

这会起作用

Answer 2

如果您希望 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'),
              ],
            ),
          ],
        )
      ],
    ),
  ),
);

flutter中如何改变appBar的背景色来匹配不同tabView页面的背景色？

How to change the appBar background color to match the background color of different tabView pages in flutter?

tabview

flutter