Flutter：PageView.builder切换页面时主容器颜色不更新问题求助

问题根源 #

1. 状态变量生命周期错误：colorIndex和PageController定义在build方法内部，每次setState触发组件重建时，这两个变量会被重新初始化，导致修改后的colorIndex被重置为0，颜色无法更新。
2. State类名称不匹配：_QuestionMainTemplateState与StatefulWidgetMyWidget不对应，会引发编译错误。

修正后的完整代码 #

//ignore: must_be_immutable
class MyWidget extends StatefulWidget {
  MyWidget({required this.child, Key? key}) : super(key: key);
  Widget child;

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  // 将状态变量和控制器提升为类成员，确保状态持久化
  late PageController pageController;
  int colorIndex = 0;

  @override
  void initState() {
    super.initState();
    pageController = PageController();
  }

  @override
  void dispose() {
    pageController.dispose(); // 释放控制器资源，避免内存泄漏
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox(
        height: double.maxFinite,
        width: double.maxFinite,
        child: Stack(
          alignment: Alignment.center,
          children: [
            Container(
              width: double.maxFinite,
              height: double.maxFinite,
              color: AppCardColors.colorsList[colorIndex],
            ),
            Positioned(
              left: 20,
              top: 50,
              child: IconButton(
                onPressed: () {},
                icon: const Icon(
                  color: Colors.white,
                  size: 30,
                  Icons.exit_to_app_rounded,
                ),
              ),
            ),
            Positioned(
              top: 125,
              child: Container(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height - 125, // 动态计算高度，替代硬编码值
                child: PageView.builder(
                    controller: pageController,
                    onPageChanged: (index) {
                      setState(() {
                        colorIndex = index % AppCardColors.colorsList.length;
                      });
                    },
                    itemCount: 5,
                    itemBuilder: (_, index) => const IrrelevantWidget()),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

关键修改说明 #

• 将pageController和colorIndex移至State类成员位置，确保状态在组件重建时不会丢失。
• 在initState中初始化控制器，dispose中释放资源，符合Flutter组件生命周期规范。
• 修正State类名称，使其与StatefulWidget正确绑定。
• 动态计算PageView容器高度，避免硬编码5000导致的布局异常。

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