Flutter中Switch组件自动关闭问题求助

我尝试在底部导航栏中集成Switch组件，最初遇到初始化变量无法访问的问题，按照ChatGPT的建议使用final并实现void initState后解决了该问题，但现在出现Switch自动关闭的新问题。相关代码如下：

import 'package:flutter/material.dart';
//1 hour

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

  @override
  State<SecurityAlertsSettings> createState() => _SecurityAlertSettingsState();
}

class _SecurityAlertSettingsState extends State<SecurityAlertsSettings> {
  late bool _push=false;
  late int _selectedIndex=4;
  late List<Widget> _pages;
  @override
  void initState() {
    super.initState();
    _pages = [
      Container(child: Text("Home"),),
      Container(child: Text("Portfolio"),),
      Container(child: Text("hehehehe"),),
      Container(child: Text("Prices"),),
      Builder(builder: (context) {
        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              width: MediaQuery.of(context).size.width,
              padding: EdgeInsets.fromLTRB(16, 14, 0, 16),
              decoration: BoxDecoration(
                border: Border.all(color: Colors.grey),
                borderRadius: BorderRadius.all(Radius.circular(10.0))
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text("Security alert(preview)",style: TextStyle(fontFamily: "GraphikRegular",fontSize: 14.0,color: Colors.grey),),
                  SizedBox(height: 8.0,),
                  Text("Your password has been reset",style: TextStyle(fontFamily: "GraphikRegular",fontSize: 16.0),),
                  Text("Jan 1",style: TextStyle(fontFamily: "GraphikRegular",fontSize: 16.0,color: Colors.grey),)
                ],
              ),
            ),
            SizedBox(height: 8.0,),
            Text("Get notified about important security alerts such as password resets",
              style: TextStyle(fontFamily: "GraphikRegular",fontSize: 16.0,color: Colors.grey),
            ),
            SizedBox(height: 40,),
            Text("Preferences",style: TextStyle(fontFamily: "GraphikMedium",fontSize: 22.0),),
            SizedBox(height: 4.0,),
            Text("Tell us how you'd like to be notified",style: TextStyle(fontFamily: "GraphikRegular",fontSize: 16.0,color: Colors.grey),),
            SizedBox(height: 12.0,),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text("Push"),
                Switch(
                    value: _push,
                    onChanged: (bool value){
                      setState(() {
                        _push = value;
                      });
                    }
                )
              ],
            )
          ],
        );
      },)
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        centerTitle: true,
        title: Text("Security alerts settings"),
      ),
      body: Container(
        padding: EdgeInsets.symmetric(horizontal: 24.0,vertical: 12.0),
        child: _pages[_selectedIndex],
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        selectedItemColor: Colors.blue,
        onTap: (index){
          setState(() {
            _selectedIndex = index;
          });
        },
        currentIndex: _selectedIndex,
        items: [
          BottomNavigationBarItem(
            icon: Image.asset("assets/images/NavBar/Home_fill.png",
              color: _selectedIndex==0 ? Colors.blue : Colors.grey,
            ),
            label: "Home",
          ),
          BottomNavigationBarItem(
            icon: Image.asset("assets/images/NavBar/Pipe_fill.png",
              color: _selectedIndex==1 ? Colors.blue : Colors.grey,
            ),
            label: "Portfolio"
          ),
          BottomNavigationBarItem(
            icon: Image.asset("assets/images/NavBar/Group 105.png",
            ),
            label: ""
          ),
          BottomNavigationBarItem(
              icon: Image.asset("assets/images/NavBar/Chart_alt_fill.png",
                color: _selectedIndex==3 ? Colors.blue : Colors.grey,
              ),
              label: "Prices"
          ),
          BottomNavigationBarItem(
              icon: Image.asset("assets/images/NavBar/User_fill.png",
                color: _selectedIndex==4 ? Colors.blue : Colors.grey,
              ),
              label: "Settings"
          ),
        ],
      ),
    );
  }
}

ChatGPT一直提示我在initState外初始化_push，我毫无头绪，请问有人知道如何解决吗？

核心问题分析 #

你的问题根源在于**_pages列表是在initState中一次性创建的**：创建时Switch绑定的是当时的_push值，后续调用setState更新_push时，这个Switch所在的Widget不会重新构建（因为它已经被存在_pages列表里，不会随状态变化刷新），导致Switch显示的状态和实际_push值不同步，看起来像是“自动关闭”。

另外，late bool _push=false;是错误写法：late修饰的变量不能直接赋值，直接初始化bool _push = false;即可，不需要late。

修复方案1：将页面列表移到build方法内 #

把_pages的构建逻辑移到build方法中，这样每次setState触发时，当前页面的Widget都会重新生成，Switch状态会和_push保持同步：

class _SecurityAlertSettingsState extends State<SecurityAlertsSettings> {
  bool _push = false; // 直接初始化，去掉late
  int _selectedIndex = 4;

  @override
  Widget build(BuildContext context) {
    // 在build内生成页面列表，确保状态变化时页面重建
    List<Widget> _pages = [
      Container(child: Text("Home")),
      Container(child: Text("Portfolio")),
      Container(child: Text("hehehehe")),
      Container(child: Text("Prices")),
      Column( // 移除多余的Builder，直接返回Column
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 原有的设置页面内容保持不变
          Container(
            width: MediaQuery.of(context).size.width,
            padding: EdgeInsets.fromLTRB(16, 14, 0, 16),
            decoration: BoxDecoration(
              border: Border.all(color: Colors.grey),
              borderRadius: BorderRadius.all(Radius.circular(10.0))
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text("Security alert(preview)",style: TextStyle(fontFamily: "GraphikRegular",fontSize: 14.0,color: Colors.grey),),
                SizedBox(height: 8.0,),
                Text("Your password has been reset",style: TextStyle(fontFamily: "GraphikRegular",fontSize: 16.0),),
                Text("Jan 1",style: TextStyle(fontFamily: "GraphikRegular",fontSize: 16.0,color: Colors.grey),)
              ],
            ),
          ),
          SizedBox(height: 8.0,),
          Text("Get notified about important security alerts such as password resets",
            style: TextStyle(fontFamily: "GraphikRegular",fontSize: 16.0,color: Colors.grey),
          ),
          SizedBox(height: 40,),
          Text("Preferences",style: TextStyle(fontFamily: "GraphikMedium",fontSize: 22.0),),
          SizedBox(height: 4.0,),
          Text("Tell us how you'd like to be notified",style: TextStyle(fontFamily: "GraphikRegular",fontSize: 16.0,color: Colors.grey),),
          SizedBox(height: 12.0,),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text("Push"),
              Switch(
                value: _push,
                onChanged: (bool value){
                  setState(() {
                    _push = value;
                  });
                }
              )
            ],
          )
        ],
      )
    ];

    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        centerTitle: true,
        title: Text("Security alerts settings"),
      ),
      body: Container(
        padding: EdgeInsets.symmetric(horizontal: 24.0,vertical: 12.0),
        child: _pages[_selectedIndex],
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        selectedItemColor: Colors.blue,
        onTap: (index){
          setState(() {
            _selectedIndex = index;
          });
        },
        currentIndex: _selectedIndex,
        items: [
          // 原有的底部导航项保持不变
          BottomNavigationBarItem(
            icon: Image.asset("assets/images/NavBar/Home_fill.png",
              color: _selectedIndex==0 ? Colors.blue : Colors.grey,
            ),
            label: "Home",
          ),
          BottomNavigationBarItem(
            icon: Image.asset("assets/images/NavBar/Pipe_fill.png",
              color: _selectedIndex==1 ? Colors.blue : Colors.grey,
            ),
            label: "Portfolio"
          ),
          BottomNavigationBarItem(
            icon: Image.asset("assets/images/NavBar/Group 105.png",),
            label: ""
          ),
          BottomNavigationBarItem(
              icon: Image.asset("assets/images/NavBar/Chart_alt_fill.png",
                color: _selectedIndex==3 ? Colors.blue : Colors.grey,
              ),
              label: "Prices"
          ),
          BottomNavigationBarItem(
              icon: Image.asset("assets/images/NavBar/User_fill.png",
                color: _selectedIndex==4 ? Colors.blue : Colors.grey,
              ),
              label: "Settings"
          ),
        ],
      ),
    );
  }
}

修复方案2：用switch判断当前页面（更优） #

不需要提前存储页面列表，直接根据_selectedIndex判断返回对应页面，减少不必要的Widget创建：

@override
Widget build(BuildContext context) {
  Widget currentPage;
  switch(_selectedIndex) {
    case 0: currentPage = Container(child: Text("Home")); break;
    case 1: currentPage = Container(child: Text("Portfolio")); break;
    case 2: currentPage = Container(child: Text("hehehehe")); break;
    case 3: currentPage = Container(child: Text("Prices")); break;
    case 4: 
      currentPage = Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 原有的设置页面内容
        ],
      );
      break;
    default: currentPage = Container();
  }

  return Scaffold(
    // 其余代码保持不变
    body: Container(
      padding: EdgeInsets.symmetric(horizontal: 24.0,vertical: 12.0),
      child: currentPage,
    ),
    // ...
  );
}

这两种方案都能解决Switch状态不同步的问题，确保每次状态更新时，页面Widget都会重新构建，Switch的显示值和_push变量保持一致。

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