Flutter中ExpandablePanel内setState不生效问题排查

你遇到的setState不生效问题，核心原因是状态变量定义位置错误：

• _Scaffold_Syllabus是build方法内的局部变量，每次调用setState触发界面重建时，build会重新执行，这个变量会被重新初始化为空Container，之前的赋值直接被覆盖，导致界面无法更新。
• 另外，你两个面板（ExpansionPanel和ExpandablePanel）各有独立的容器，当前的单变量设计无法区分是哪个面板的内容需要更新，逻辑上也不合理。

步骤1：将状态变量移至State类成员位置 #

把需要维护的容器内容变量定义在_SyllabusState类的顶部，作为成员变量，而非build方法内的局部变量。针对两个面板的独立容器，我们定义两个变量分别维护：

class _SyllabusState extends State<Syllabus> {
  // 分别维护两个面板的容器内容
  Widget _panel1Content = Container(); 
  Widget _panel2Content = Container();
  late Size _size;
  final Color color1 = HexColor('#3E6BA9');

  @override
  Widget build(BuildContext context) {
    _size = MediaQuery.of(context).size;
    // 后续build逻辑不变，仅替换变量名
    ...
  }
}

步骤2：修改按钮点击逻辑与容器引用 #

• 针对ExpansionPanel内的按钮，点击时更新_panel1Content，并将容器的child替换为该变量；
• 针对ExpandablePanel内的按钮，点击时更新_panel2Content，对应容器也替换为该变量；
• 同时修正按钮样式的判断条件，使用对应的成员变量。

完整修复后代码示例 #

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

  @override
  State<Syllabus> createState() => _SyllabusState();
}

class _SyllabusState extends State<Syllabus> {
  Widget _panel1Content = Container();
  Widget _panel2Content = Container();
  late Size _size;
  final Color color1 = HexColor('#3E6BA9');

  @override
  Widget build(BuildContext context) {
    _size = MediaQuery.of(context).size;
    return SingleChildScrollView(
      child: Container(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              ExpansionPanelList(
                children: [
                  ExpansionPanel(
                      headerBuilder: (context, isExpanded) {
                        return Text("dc");
                      },
                      body: SingleChildScrollView(
                        child: Container(
                          padding: _size.width > 450
                              ? EdgeInsets.all(40)
                              : EdgeInsets.only(top: 40),
                          decoration: BoxDecoration(
                              border: Border.all(width: 3, color: color1)),
                          child: Column(
                            children: [
                              Row(
                                children: [
                                  Expanded(
                                    child: Center(
                                      child: ElevatedButton(
                                        onPressed: () {
                                          setState(() {
                                            _panel1Content = Table_Lectures_Scaffold;
                                          });
                                        },
                                        child: Text("ترم أول",
                                            style: TextStyle(
                                                fontSize: _size.width <= 435
                                                    ? 9
                                                    : 15)),
                                        style: ElevatedButton.styleFrom(
                                          foregroundColor: _panel1Content ==
                                                  Table_Lectures_Scaffold
                                              ? color1
                                              : Colors.white,
                                          backgroundColor: _panel1Content ==
                                                  Table_Lectures_Scaffold
                                              ? Colors.white
                                              : color1,
                                        ),
                                      ),
                                    ),
                                  ),
                                  Expanded(
                                    child: Center(
                                      child: ElevatedButton(
                                        onPressed: () {
                                          setState(() {
                                            _panel1Content = Table_Lectures_Scaffold;
                                          });
                                        },
                                        child: Text("ترم ثان",
                                            style: TextStyle(
                                                fontSize: _size.width <= 435
                                                    ? 9
                                                    : 15)),
                                        style: ElevatedButton.styleFrom(
                                          foregroundColor: _panel1Content ==
                                                  Table_Lectures_Scaffold
                                              ? color1
                                              : Colors.white,
                                          backgroundColor: _panel1Content ==
                                                  Table_Lectures_Scaffold
                                              ? Colors.white
                                              : color1,
                                        ),
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              SafeArea(
                                child: Container(
                                  width: 500,
                                  height: 500,
                                  padding: _size.width > 450
                                      ? EdgeInsets.all(40)
                                      : EdgeInsets.only(top: 40),
                                  decoration: BoxDecoration(
                                      border:
                                          Border.all(width: 3, color: color1)),
                                  child: _panel1Content,
                                ),
                              )
                            ],
                          ),
                        ),
                      ))
                ],
              ),
              ExpandablePanel(
                  header: Text("منهج السنه الدراسية الرابعة"),
                  collapsed: Text(""),
                  expanded: SingleChildScrollView(
                    child: Container(
                      padding: _size.width > 450
                          ? EdgeInsets.all(40)
                          : EdgeInsets.only(top: 40),
                      decoration: BoxDecoration(
                          border: Border.all(width: 3, color: color1)),
                      child: Column(
                        children: [
                          Row(
                            children: [
                              Expanded(
                                child: Center(
                                  child: ElevatedButton(
                                    onPressed: () {
                                      setState(() {
                                        _panel2Content = Table_Lectures_Scaffold;
                                      });
                                    },
                                    child: Text("ترم أول",
                                        style: TextStyle(
                                            fontSize:
                                                _size.width <= 435 ? 9 : 15)),
                                    style: ElevatedButton.styleFrom(
                                      foregroundColor: _panel2Content ==
                                              Table_Lectures_Scaffold
                                          ? color1
                                          : Colors.white,
                                      backgroundColor: _panel2Content ==
                                              Table_Lectures_Scaffold
                                          ? Colors.white
                                          : color1,
                                    ),
                                  ),
                                ),
                              ),
                              Expanded(
                                child: Center(
                                  child: ElevatedButton(
                                    onPressed: () {
                                      setState(() {
                                        _panel2Content = Table_Lectures_Scaffold;
                                      });
                                    },
                                    child: Text("ترم ثان",
                                        style: TextStyle(
                                            fontSize:
                                                _size.width <= 435 ? 9 : 15)),
                                    style: ElevatedButton.styleFrom(
                                      foregroundColor: _panel2Content ==
                                              Table_Lectures_Scaffold
                                          ? color1
                                          : Colors.white,
                                      backgroundColor: _panel2Content ==
                                              Table_Lectures_Scaffold
                                          ? Colors.white
                                          : color1,
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          ),
                          SizedBox(
                            height: 10,
                          ),
                          SafeArea(
                            child: Container(
                              width: 500,
                              height: 500,
                              padding: _size.width > 450
                                  ? EdgeInsets.all(40)
                                  : EdgeInsets.only(top: 40),
                              decoration: BoxDecoration(
                                  border: Border.all(width: 3, color: color1)),
                              child: _panel2Content,
                            ),
                          )
                        ],
                      ),
                    ),
                  ))
            ],
          ),
        ),
      ),
    );
  }
}

额外注意点 #

• 确保Table_Lectures_Scaffold是一个Widget实例，如果它是一个Widget类，需要改为Table_Lectures_Scaffold()（根据实际构造方法传参）；
• 如果你希望两个面板的内容同步更新，可以复用同一个成员变量，但从UI布局看，分开维护更符合当前的独立容器设计。

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