Flutter中setState()无法更新按钮颜色问题求助

你的问题出在**pages列表中的Widget是提前创建好的静态实例**。这些按钮在初始化时就读取了当时的_flag值，之后即使调用setState更新_flag，这些已经创建好的Widget不会重新读取新的_flag，自然不会更新样式和文本。

把pages的创建逻辑移到build方法内部，或者改成动态生成Widget的函数列表，确保每次setState后都能生成读取最新_flag的Widget。

修改后的代码示例： #

import 'package:flutter/material.dart';

void main() {
  runApp(const MyFirstApp());
}

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

  @override
  State<MyFirstApp> createState() => _MyFirstAppState();
}

class _MyFirstAppState extends State<MyFirstApp> {
  int _selectedIndex = 0;
  bool _flag = false;

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

  @override
  Widget build(BuildContext context) {
    // 把pages移到build里，每次build都会重新生成，读取最新的_flag
    List<Widget> pages = <Widget>[
      ElevatedButton(
        onPressed: () => setState(() => _flag = !_flag),
        style: ElevatedButton.styleFrom(
          backgroundColor: _flag ? Colors.red : Colors.teal,
        ),
        child: Text(_flag ? 'Red' : 'Green'),
      ),
      ElevatedButton(
        onPressed: () => setState(() => _flag = !_flag),
        style: ElevatedButton.styleFrom(
          backgroundColor: _flag ? Colors.black : Colors.blue,
        ),
        child: Text(_flag ? 'Black' : 'Blue'),
      ),
    ];

    return MaterialApp(
      home: Scaffold(
        body: pages.elementAt(_selectedIndex),
        bottomNavigationBar: BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              label: "",
              icon: Text('D'),
            ),
            BottomNavigationBarItem(
              label: "",
              icon: Text('O'),
            ),
          ],
          currentIndex: _selectedIndex,
          onTap: _onItemTapped,
        ),
      ),
    );
  }
}

或者更灵活的函数列表方式：

// 把pages改成返回Widget的函数列表
final List<Widget Function()> pageBuilders = [
  () => ElevatedButton(
        onPressed: () => setState(() => _flag = !_flag),
        style: ElevatedButton.styleFrom(
          backgroundColor: _flag ? Colors.red : Colors.teal,
        ),
        child: Text(_flag ? 'Red' : 'Green'),
      ),
  () => ElevatedButton(
        onPressed: () => setState(() => _flag = !_flag),
        style: ElevatedButton.styleFrom(
          backgroundColor: _flag ? Colors.black : Colors.blue,
        ),
        child: Text(_flag ? 'Black' : 'Blue'),
      ),
];

// 在build里调用函数生成Widget
body: pageBuilders[_selectedIndex](),

对于多页面Flutter应用，推荐以下几种更易维护的方案：

1. 使用IndexedStack（适合底部导航，保留页面状态） #

IndexedStack会同时加载所有子页面，但只显示选中的页面，切换时不会重建页面，适合需要保留页面状态的场景：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyFirstApp());
}

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

  @override
  State<MyFirstApp> createState() => _MyFirstAppState();
}

class _MyFirstAppState extends State<MyFirstApp> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: IndexedStack(
          index: _selectedIndex,
          children: const [
            PageOne(), // 单独的页面组件
            PageTwo(),
          ],
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(label: "", icon: Text('D')),
            BottomNavigationBarItem(label: "", icon: Text('O')),
          ],
          currentIndex: _selectedIndex,
          onTap: (index) => setState(() => _selectedIndex = index),
        ),
      ),
    );
  }
}

// 页面1组件
class PageOne extends StatefulWidget {
  const PageOne({super.key});

  @override
  State<PageOne> createState() => _PageOneState();
}

class _PageOneState extends State<PageOne> {
  bool _flag = false;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () => setState(() => _flag = !_flag),
        style: ElevatedButton.styleFrom(
          backgroundColor: _flag ? Colors.red : Colors.teal,
        ),
        child: Text(_flag ? 'Red' : 'Green'),
      ),
    );
  }
}

// 页面2组件
class PageTwo extends StatefulWidget {
  const PageTwo({super.key});

  @override
  State<PageTwo> createState() => _PageTwoState();
}

class _PageTwoState extends State<PageTwo> {
  bool _flag = false;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () => setState(() => _flag = !_flag),
        style: ElevatedButton.styleFrom(
          backgroundColor: _flag ? Colors.black : Colors.blue,
        ),
        child: Text(_flag ? 'Black' : 'Blue'),
      ),
    );
  }
}

2. 使用独立页面组件+条件渲染 #

如果不需要保留页面状态，每次切换都重建页面，可以直接在build里根据_selectedIndex返回对应的页面组件：

body: switch(_selectedIndex){
  0 => const PageOne(),
  1 => const PageTwo(),
  _ => const SizedBox(),
},

3. 使用PageView（适合滑动切换） #

如果需要支持左右滑动切换页面，配合底部导航栏使用PageView：

PageController _pageController = PageController(initialPage: 0);

// body部分
PageView(
  controller: _pageController,
  onPageChanged: (index) => setState(() => _selectedIndex = index),
  children: const [PageOne(), PageTwo()],
),

// BottomNavigationBar的onTap
onTap: (index) {
  _pageController.jumpToPage(index);
  setState(() => _selectedIndex = index);
},

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