Flutter下拉菜单状态不更新求助：选中项始终停留在索引0

问题根源 #

1. 状态变量作用域错误
   selectedGraph被定义在build方法内部，每次调用setState触发UI重建时，该变量都会被重新初始化为graphs[0]，导致选中状态无法持久化。

2. 赋值逻辑颠倒
   onChanged回调中错误地将selectedGraph的值赋给了参数val，而非将用户选中的val赋值给selectedGraph，完全违背了状态更新的逻辑。

修正后的完整代码 #

class RegionalDailyTableStats extends StatefulWidget {
  final String getString;
  final String getBargraphString;
  final String getAreagraphString;
  final String getGraphString;
  final String getLineGraphString;
  final String getPDFString;
  final String getPieChartString;
  const RegionalDailyTableStats({
    super.key,
    required this.getString,
    required this.getBargraphString,
    required this.getAreagraphString,
    required this.getGraphString,
    required this.getLineGraphString,
    required this.getPDFString,
    required this.getPieChartString,
  });

  @override
  State<RegionalDailyTableStats> createState() =>
      _RegionalDailyTableStatsState();
}

class _RegionalDailyTableStatsState extends State<RegionalDailyTableStats> {
  late List<String> graphs;
  String? selectedGraph;

  @override
  void initState() {
    super.initState();
    // 在initState中初始化列表和选中状态，避免build重复初始化
    graphs = [
      widget.getGraphString,
      widget.getBargraphString,
      widget.getAreagraphString,
      widget.getLineGraphString,
      widget.getPieChartString,
    ];
    selectedGraph = graphs[0];
  }

  @override
  Widget build(BuildContext context) {
    final screenHeight = MediaQuery.of(context).size.height;
    final screenWidth = MediaQuery.of(context).size.width;

    return Container(
      height: screenHeight,
      width: screenWidth,
      child: SizedBox(
        width: screenWidth * 0.1,
        child: Column(
          children: [
            DropdownButton<String>(
                value: selectedGraph,
                items: graphs.map((e) {
                  return DropdownMenuItem(
                    value: e,
                    child: Text(e),
                  );
                }).toList(),
                onChanged: (val) {
                  setState(() {
                    // 正确将选中的值赋值给状态变量
                    selectedGraph = val;
                  });
                }),
          ],
        ),
      ),
    );
  }
}

关键修正说明 #

• 将graphs和selectedGraph提升为State类的成员变量，确保状态在UI重建时不会丢失。
• 在initState方法中完成初始化操作，只执行一次，避免重复初始化。
• 修正onChanged中的赋值逻辑，将用户选中的val赋值给selectedGraph，触发正确的状态更新。

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