Flutter中如何从其他页面点击按钮修改HomeScreen的AppBar颜色

下面提供两种实用的实现方式，可根据项目复杂度选择：

方法一：回调函数（轻量场景首选） #

核心思路是让父页面HomeScreen维护AppBar背景色的状态，将修改状态的方法通过参数传递给子页面B，子页面点击按钮时调用该方法触发父页面更新。

代码示例 #

HomeScreen 实现

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  // 维护AppBar的背景色状态
  Color _appBarColor = Colors.blue;

  // 修改颜色的方法，将传递给子页面B
  void _updateAppBarColor(Color newColor) {
    setState(() {
      _appBarColor = newColor;
    });
  }

  int _selectedIndex = 0;
  late final List<Widget> _pages;

  @override
  void initState() {
    super.initState();
    // 初始化子页面，给B页面传入回调方法
    _pages = [
      const PageA(),
      PageB(onColorChange: _updateAppBarColor),
    ];
  }

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: _appBarColor,
        title: const Text('Home Screen'),
      ),
      body: _pages.elementAt(_selectedIndex),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'A'),
          BottomNavigationBarItem(icon: Icon(Icons.business), label: 'B'),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );
  }
}

PageB 实现

class PageB extends StatelessWidget {
  final Function(Color) onColorChange;

  const PageB({super.key, required this.onColorChange});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: TextButton(
        onPressed: () {
          // 点击按钮时调用回调，修改父页面的AppBar颜色
          onColorChange(Colors.red);
        },
        child: const Text('修改AppBar背景色为红色'),
      ),
    );
  }
}

方法二：状态管理（复杂场景推荐） #

如果页面层级较多、状态需要在多个页面共享，推荐使用Provider这类状态管理工具，把AppBar颜色抽离到全局状态中，父页面监听状态变化，子页面直接更新状态。

代码示例 #

1. 创建状态类

import 'package:flutter/foundation.dart';

class AppBarColorProvider with ChangeNotifier {
  Color _color = Colors.blue;

  Color get color => _color;

  void setColor(Color newColor) {
    _color = newColor;
    notifyListeners(); // 通知所有监听者更新
  }
}

2. 在入口处注入Provider

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => AppBarColorProvider(),
      child: const MyApp(),
    ),
  );
}

3. HomeScreen 实现

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    _selectedIndex = index;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // 监听状态变化，自动更新颜色
        backgroundColor: Provider.of<AppBarColorProvider>(context).color,
        title: const Text('Home Screen'),
      ),
      body: IndexedStack(
        index: _selectedIndex,
        children: const [
          PageA(),
          PageB(),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'A'),
          BottomNavigationBarItem(icon: Icon(Icons.business), label: 'B'),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );
  }
}

4. PageB 实现

class PageB extends StatelessWidget {
  const PageB({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: TextButton(
        onPressed: () {
          // 获取状态实例并修改颜色
          Provider.of<AppBarColorProvider>(context, listen: false).setColor(Colors.green);
        },
        child: const Text('修改AppBar背景色为绿色'),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Shalla