Flutter：解决将DropdownButton移入Step类用于Stepper时的断言失败Bug

这个断言错误我太熟悉了，核心原因就是DropdownButton的value没有在提供的items列表中找到匹配项，或者存在多个相同value的items（不过你的代码里最后一个item的text是Subway4但value是Subway5，这点没问题）。结合你的代码来看，主要踩了这几个坑：

1. 直接修改widget.value是错误操作 #

StatefulWidget的成员变量应该是不可变的（建议声明为final），你在onChanged里直接修改widget.value不仅没法同步到父组件OrderStep的value，还会导致DropdownButton的value状态混乱——毕竟父组件的初始value可能本来就和items不匹配。

2. 父组件OrderStep的初始value可能不在Dropdown的items中 #

如果创建OrderStep时传入的value不是你在setDropdownButton里定义的Subway1-Subway5中的某一个，直接就会触发这个断言错误。

3. 在build方法里重复创建DropdownButton #

每次build都调用setDropdownButton()重新实例化DropdownButton，这不符合Flutter的状态管理最佳实践，容易引发不必要的重绘和状态异常。

修复后的代码示例 #

第一步：修正OrderDropDownButton的状态管理 #

我们需要通过回调函数把选中的值传递回父组件OrderStep，而不是直接修改widget.value：

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';

TextStyle itemTextStyle = TextStyle(fontSize: 14);
TextStyle titleTextStyle = TextStyle(fontSize: 20);

class OrderStep {
  final int index;
  String value; // 改为可修改的变量
  final String title;
  final String hint;
  final Map mapElements;
  bool isActive = true;
  Step step;

  OrderStep({
    @required this.value,
    @required this.index,
    @required this.title,
    @required this.mapElements,
    this.hint = '',
  })  : assert(value != null),
        assert(index != null),
        assert(title != null) {
    setStep();
  }

  void setStep() {
    step = Step(
      title: Text(
        title,
        style: titleTextStyle,
      ),
      isActive: isActive,
      // 传入回调函数，更新OrderStep的value
      content: OrderDropDownButton(
        currentValue: value,
        mapElements: mapElements,
        onValueChanged: (newValue) {
          value = newValue;
          // 如果需要让Stepper自动刷新UI，建议把OrderStep改成StatefulWidget，或者用状态管理工具
          // 这里先更新value，后续按需调整结构
        },
      ),
    );
  }
}

class OrderDropDownButton extends StatefulWidget {
  final String currentValue;
  final Map mapElements;
  final Function(String) onValueChanged;

  const OrderDropDownButton({
    Key key,
    @required this.currentValue,
    @required this.mapElements,
    @required this.onValueChanged,
  })  : assert(currentValue != null),
        assert(mapElements != null),
        assert(onValueChanged != null),
        super(key: key);

  @override
  OrderDropDownButtonState createState() => OrderDropDownButtonState();
}

class OrderDropDownButtonState extends State<OrderDropDownButton> {
  String _selectedValue;

  @override
  void initState() {
    super.initState();
    // 初始化选中值，同时校验是否合法
    _selectedValue = widget.currentValue;
    final validValues = _buildDropdownItems().map((item) => item.value).toList();
    // 如果初始值不在items里，默认选中第一个选项，避免触发断言
    if (!validValues.contains(_selectedValue)) {
      _selectedValue = validValues.first;
    }
  }

  List<DropdownMenuItem<String>> _buildDropdownItems() {
    // 你可以用mapElements生成items，这里暂时保留你硬编码的示例
    return [
      DropdownMenuItem(
        child: Text("Subway1", style: itemTextStyle),
        value: "Subway1",
      ),
      DropdownMenuItem(
        child: Text("Subway2", style: itemTextStyle),
        value: "Subway2",
      ),
      DropdownMenuItem(
        child: Text("Subway3", style: itemTextStyle),
        value: "Subway3",
      ),
      DropdownMenuItem(
        child: Text("Subway4", style: itemTextStyle),
        value: "Subway4",
      ),
      DropdownMenuItem(
        child: Text("Subway5", style: itemTextStyle),
        value: "Subway5",
      )
    ];
  }

  @override
  Widget build(BuildContext context) {
    return DropdownButton<String>(
      value: _selectedValue,
      isDense: true,
      isExpanded: true,
      hint: Text("Wybierz danie"),
      items: _buildDropdownItems(),
      onChanged: (newValue) {
        setState(() {
          _selectedValue = newValue;
        });
        // 通知父组件更新value
        widget.onValueChanged(newValue);
      },
    );
  }
}

关键修改点说明： #

• 给OrderDropDownButton加了onValueChanged回调，把选中的值传递回OrderStep，彻底避免直接修改widget属性的错误操作。
• 在OrderDropDownButtonState的initState里做了初始值校验，如果初始value不在items列表中，自动选中第一个选项，从根源上避免断言错误。
• 把OrderStep的value改成可修改的变量，通过回调更新它的值。
• 移除了build方法里重复创建DropdownButton的操作，直接在build里返回DropdownButton，状态由组件内部的_selectedValue管理，更符合Flutter的状态管理逻辑。

额外提示： #

如果你的Stepper需要在选中值变化时自动刷新Step的UI，建议把OrderStep也改成StatefulWidget，或者用Provider、Riverpod这类状态管理工具，这样状态变化时UI能自动同步更新。

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