Flutter DropdownButton选中项不显示问题求助

问题根源 #

你把selectedValue声明在了build方法内部——每次调用setState触发页面重建时，这个变量都会被重新初始化为null。所以DropdownButton的value属性始终拿到的是null，自然一直显示提示文本；而控制台能打印选中值，只是因为打印操作发生在重建之前，临时值还存在而已。

修复步骤 #

1. 将selectedValue移到State类的成员变量区域，和其他状态变量（比如_dateTime、_isSelected）放在一起，让State维护它的状态，避免重建时被重置。
2. 去掉onChanged里嵌套的多余setState，一次setState就足够触发重建。

修改后的完整代码 #

class DeviceSelectionPage extends StatefulWidget {
  const DeviceSelectionPage({Key? key}) : super(key: key);

  @override
  State<DeviceSelectionPage> createState() => _DeviceSelectionPageState();
}

class _DeviceSelectionPageState extends State<DeviceSelectionPage> {
  DateTime _dateTime = DateTime.now();
  bool _isSelected = false;
  // 把selectedValue移到这里作为成员变量
  String? selectedValue;

  @override
  Widget build(BuildContext context) {
    final List<String> itemsList = [
      'A1',
      'A22',
      '5E70CA9163C3EF2B',
      '1E2BD5D7D19EC75D',
      '9264ED34F8CF8A8F',
      '32D919C3F8ECC18E',
      '4ED07890CAC5A184',
      'F60AB38638788275',
      'AE65976D5F408107',
      '6EF6D048033567D5',
    ];

    return Scaffold(
        appBar: AppBar(
          title: const Text('Device Selection page'),
        ),
        body: Container(
            child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  padding: const EdgeInsets.symmetric(horizontal: 24.0),
                  decoration: BoxDecoration(
                      border:
                          Border.all(color: Colors.lightBlueAccent, width: 1.0),
                      borderRadius: kBorderRadius),
                  child: DropdownButtonHideUnderline(
                    child: DropdownButton(
                      hint: Text(
                        'Devices',
                        style: TextStyle(color: Colors.white54, fontSize: 20),
                      ),
                      style:
                          const TextStyle(color: Colors.orange, fontSize: 20),
                      borderRadius: kBorderRadius,
                      iconSize: 40,
                      elevation: 16,
                      onChanged: (value) {
                        setState(() {
                          selectedValue = value.toString();
                          print(selectedValue);
                          // 去掉多余的嵌套setState
                        });
                      },
                      value: selectedValue,
                      items: itemsList.map((listItem) {
                        return DropdownMenuItem<String>(
                          value: listItem,
                          child: Text(listItem),
                        );
                      }).toList(),
                    ),
                  ),
                )
              ],
            ),
          ],
        )));
  }
}

补充说明 #

• 状态变量必须放在State类的成员位置，才能在多次build之间保持状态；如果放在build方法里，每次重建都会重新初始化，丢失之前的赋值。
• 嵌套的setState完全没必要，一次setState就能触发页面重建，更新所有依赖状态变量的组件。

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