User interface 选择新选项卡时更改AppBar颜色（颤振）

我有一个带有标签栏的应用程序，为了让UI更好，我想让它在你进入另一个标签时颜色会发生变化。如何使它在我单击或滑动到另一个选项卡（比如黄色选项卡）时，整个appbar都变为该颜色

代码：

void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回ChangeNotifierProvider(
创建：（上下文）=>ColorChange（），
孩子：MaterialApp(
主题：ThemeData.light（），
home:SimpleTab（），
),
);
}
}
类_TestPageState扩展了状态{
tab控制器；
类ColorChange扩展了ChangeNotifier{
颜色=颜色[0]；
颜色getColor（）{
返回颜色；
}
void changeColor（）{
颜色=颜色[控制器索引]；
印刷品（彩色）；
notifyListeners（）；
}
}
列表颜色=常量[
颜色，绿色，
颜色，黄色，
颜色，红色，
颜色，蓝色，
颜色，深橙色，
颜色，深紫色，
];
类SimpleTab扩展StatefulWidget{
@凌驾
_SimpleTabState createState（）=>_SimpleTabState（）；
}
类_SimpleTableState扩展了状态
使用SingleTickerProviderStateMixin{
测试仪=测试仪（）；
@凌驾
void initState（）{
super.initState（）；
controller=TabController（长度：colors.length，vsync:this）；
controller.addListener（ColorChange（）.changeColor）；
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：文本（“简单选项卡演示”），
backgroundColor:Provider.of（context）.getColor（），
底部：选项卡栏(
控制器：控制器，
选项卡：[
标签(
文本：“绿色”，
),
标签(
文本：“黄色”，
),
标签(
文字：“红色”，
),
标签(
文本：“蓝色”，
),
标签(
文字：“橙色”，
),
标签(
文字：“紫色”，
),
],
isScrollable：是的，
),
),
正文：选项卡视图(
控制器：控制器，
儿童：[
容器(
//子项：WidgetThing（测试人员：测试人员），
),
容器(
//子项：WidgetThing（测试人员：测试人员），
),
容器(
//子项：WidgetThing（测试人员：测试人员），
),
容器(
//子项：WidgetThing（测试人员：测试人员），
),
容器(
//子项：WidgetThing（测试人员：测试人员），
),
容器(
//子项：WidgetThing（测试人员：测试人员），
),
],
),
);
}
}

这只是我的real app的一个非常简化的演示。我的real app处理从API获取的大量数据，因此如果不使用setstate（），可能会更好，因为重新构建整个小部件可能会不必要地调用http请求。

您可以尝试此方法

导入“包装：颤振/材料.省道”；
void main（）{
runApp（新的MyApp（））；
}
类MyApp扩展了无状态小部件{
小部件构建（构建上下文）{
返回新材料PP(
标题：“演示应用程序”，
主题：新主题数据(
主样本：颜色。蓝色，
),
主页：新建MyHomePage（），
);
}
}
类MyHomePage扩展StatefulWidget{
@凌驾
_MyHomePageState createState（）=>new_MyHomePageState（）；
}
类_MyHomePageState扩展状态{
@凌驾
小部件构建（构建上下文）{
归还新脚手架(
正文：SimpleTab（），
);
}
}
类自定义选项卡{
const CustomTab（{this.title，this.color}）；
最后的字符串标题；
最终颜色；
}
类SimpleTab扩展StatefulWidget{
@凌驾
_SimpleTabState createState（）=>_SimpleTabState（）；
}
类_SimpleTableState扩展了状态
使用SingleTickerProviderStateMixin{
tab控制器；
列表选项卡=常量[
const CustomTab（标题：“主页”，颜色：Colors.deepOrangeAccent），
const CustomTab（标题：“设置”，颜色：Colors.blueGrey），
常量自定义选项卡（标题：“地图”，颜色：Colors.teal），
];
自定义选项卡选择选项卡；
@凌驾
void initState（）{
super.initState（）；
控制器=新的TabController（长度：tabs.length，vsync:this）；
controller.addListener（_select）；
selectedTab=选项卡[0]；
}
void_select（）{
设置状态（）{
selectedTab=选项卡[控制器索引]；
});
}
@凌驾
小部件构建（构建上下文）{
textStyle（）{
返回新的文本样式（颜色：Colors.white，fontSize:30.0）；
}
归还新脚手架(
appBar：新的appBar(
标题：新文本（“Smiple选项卡演示”），
背景颜色：选择选项卡颜色，
底部：新选项卡栏(
控制器：控制器，
标签：标签
.map（（e）=>新选项卡(
文本：e.标题，
))
.toList（）），
),
正文：新选项卡视图(
控制器：控制器，
子项：选项卡
.地图(
（e） =>新容器(
颜色：即颜色，
孩子：新中心(
儿童：新文本(
e、 头衔，
样式：textStyle（），
),
),
),
)
.toList（）），
);
}
}

Hi！谢谢您的解决方案，但是您知道如何使用提供商更改颜色吗？因为我不想每次转到另一个选项卡时都重新构建整个小部件。您需要通过

ChangeNotifierProvider

或

Consumer

包装

AppBar

小部件，并通知更改。如果需要，请标记并投票发现它有用对不起，你能告诉我如何在上面的代码中做到这一点吗？你可以为它创建一个通知程序。检查。

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<ColorChange>(
      create: (context) => ColorChange(),
      child: MaterialApp(
        theme: ThemeData.light(),
        home: SimpleTab(),
      ),
    );
  }
}

class _TestPageState extends State<TestPage> {
TabController controller;

class ColorChange extends ChangeNotifier {
  Color color = colors[0];

  Color getColor() {
    return color;
  }

  void changeColor() {
    color = colors[controller.index];
    print(color);
    notifyListeners();
  }
}

List<Color> colors = const [
  Colors.green,
  Colors.yellow,
  Colors.red,
  Colors.blue,
  Colors.deepOrange,
  Colors.deepPurple,
];

class SimpleTab extends StatefulWidget {
  @override
  _SimpleTabState createState() => _SimpleTabState();
}

class _SimpleTabState extends State<SimpleTab>
    with SingleTickerProviderStateMixin {
  Tester tester = Tester();

  @override
  void initState() {
    super.initState();
    controller = TabController(length: colors.length, vsync: this);
    controller.addListener(ColorChange().changeColor);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Simple Tab Demo"),
        backgroundColor: Provider.of<ColorChange>(context).getColor(),
        bottom: TabBar(
          controller: controller,
          tabs: [
            Tab(
              text: 'Green',
            ),
            Tab(
              text: 'Yellow',
            ),
            Tab(
              text: 'Red',
            ),
            Tab(
              text: 'Blue',
            ),
            Tab(
              text: 'Orange',
            ),
            Tab(
              text: 'Purple',
            ),
          ],
          isScrollable: true,
        ),
      ),
      body: TabBarView(
        controller: controller,
        children: <Widget>[
          Container(
//            child: WidgetThing(tester: tester),
          ),
          Container(
//            child: WidgetThing(tester: tester),
          ),
          Container(
//            child: WidgetThing(tester: tester),
          ),
          Container(
//            child: WidgetThing(tester: tester),
          ),
          Container(
//            child: WidgetThing(tester: tester),
          ),
          Container(
//            child: WidgetThing(tester: tester),
          ),
        ],
      ),
    );
  }
}