User interface 当在颤振上使用ChangeNotifierProvider选择另一个选项卡时，如何更改AppBar颜色？

我知道如何使用tab controller和set state更改AppBar的颜色，但每次单击另一个选项卡时，所有小部件都会重新生成，我的应用程序会再次调用http.get。我知道，通过使用ChangeNotifierProvider和notifyListeners（），提供程序包只能用于更改某些小部件，而不会影响其他小部件。但当我尝试实现这一点时，颜色没有改变。我打印了颜色，以确保在单击另一个选项卡时调用了该方法，并且确保一切正常。调用notifyListeners（）来更改颜色的值时似乎出现了问题

代码如下：

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

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 {

  @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(
            // some future builder using http.get
          ),
          Container(
            // some future builder using http.get
          ),
          Container(
            // some future builder using http.get
          ),
          Container(
            // some future builder using http.get
          ),
          Container(
            // some future builder using http.get
          ),
          Container(
            // some future builder using http.get
          ),
        ],
      ),
    );
  }
}

void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回ChangeNotifierProvider(
创建：（上下文）=>ColorChange（），
孩子：MaterialApp(
主题：ThemeData.light（），
home:SimpleTab（），
),
);
}
}
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：是的，
),
),
正文：选项卡视图(
控制器：控制器，
儿童：[
容器(
//一些使用http.get的未来构建器
),
容器(
//一些使用http.get的未来构建器
),
容器(
//一些使用http.get的未来构建器
),
容器(
//一些使用http.get的未来构建器
),
容器(
//一些使用http.get的未来构建器
),
容器(
//一些使用http.get的未来构建器
),
],
),
);
}
}

请帮忙

您需要添加“onTap”参数。此外，每次使用getColor（）方法返回相同的颜色。更改它，使其在不同索引处返回不同的颜色

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

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

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

class ColorChange extends ChangeNotifier {
  Color getColor(int index) {            <-------Changed
    return colors[index];
  }

  void changeColor(int index) {
    Color color = colors[index];
    print(color);
    notifyListeners();
  }
}

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

class _SimpleTabState extends State<SimpleTab>
    with SingleTickerProviderStateMixin {
  TabController controller;

  @override
  void initState() {
    controller = TabController(length: colors.length, vsync: this);

    //
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Simple Tab Demo"),
        backgroundColor:
            Provider.of<ColorChange>(context).getColor(controller.index),
        bottom: TabBar(
          controller: controller,
          onTap: (index) {                   <---------Add this call back
            Provider.of<ColorChange>(context, listen: false).changeColor(index);
          },
          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(
              // some future builder using http.get
              ),
          Container(
              // some future builder using http.get
              ),
          Container(
              // some future builder using http.get
              ),
          Container(
              // some future builder using http.get
              ),
          Container(
              // some future builder using http.get
              ),
          Container(
              // some future builder using http.get
              ),
        ],
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
导入“包：provider/provider.dart”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回ChangeNotifierProvider(
创建：（上下文）=>ColorChange（），
孩子：MaterialApp(
主题：ThemeData.light（），
home:SimpleTab（），
),
);
}
}
列表颜色=常量[
颜色，绿色，
颜色，黄色，
颜色，红色，
颜色，蓝色，
颜色，深橙色，
颜色，深紫色，
];
类ColorChange扩展了ChangeNotifier{
Color getColor（int index）{u SimpleTabState（）；
}
类_SimpleTableState扩展了状态
使用SingleTickerProviderStateMixin{
tab控制器；
@凌驾
void initState（）{
controller=TabController（长度：colors.length，vsync:this）；
//
super.initState（）；
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：文本（“简单选项卡演示”），
背景颜色：
Provider.of（context.getColor）（controller.index），
底部：选项卡栏(
控制器：控制器，
onTap：（index）{你检查过这个问题吗？这不是我想要的。你提供的解决方案使用了setstate（），这不适用于我的情况，因为我不想重建所有小部件。嗨！有没有办法检测到刷卡并相应地更改appbar的颜色，因为目前它只检测到选项卡上的点击。也许，您想使用PageView。参考：