Flutter自定义DropdownButton函数无法显示选中值求助

嘿，我来帮你排查这个问题！你遇到的核心问题是状态更新没有同步到外部变量，导致下拉菜单始终显示提示文本。先来看下问题根源，再给你解决办法：

问题描述 #

你写了一个可复用的下拉菜单函数，能正常加载所有选项，但选择选项后，菜单依然显示menuTitle的提示文本，不会更新为选中的值。

你的代码 #

List<String> cities= ['Rome', 'London', 'Paris'];
String selectedCity;
String title='Select a city';
Widget _buildDropdown( String menuTitle, String selectedItem, List<String> list) {
  return Container(
    width: MediaQuery.of(context).size.width * 0.8,
    margin: EdgeInsets.all(10.0),
    decoration: BoxDecoration(
        border: Border.all(color: Colors.grey[300]),
        borderRadius: BorderRadius.circular(10.0)),
    child: DropdownButtonHideUnderline(
      child: ButtonTheme(
        alignedDropdown: true,
        child: DropdownButton<String>(
          isExpanded: true,
          hint: Text(
            menuTitle.toUpperCase(),
            style: GoogleFonts.lato(
                textStyle: TextStyle(
                  color: Colors.grey[500],
                  fontWeight: FontWeight.bold,
                )),
          ),
          value: selectedItem,
          items: list.map((String val) {
            return DropdownMenuItem(
              value: val,
              child: Text(
                val.toUpperCase(),
                style: GoogleFonts.lato(
                    textStyle: TextStyle(
                      color: Colors.grey[500],
                    )),
              ),
            );
          }).toList(),
          onChanged: (String value) {
            setState(() {
              selectedItem = value;
            });
          },
        ),
      ),
    ),
  );
}

问题根源 #

你把selectedItem作为普通参数传递给_buildDropdown，这是值传递——函数内部的selectedItem是一个独立的局部变量，和外部的selectedCity毫无关联。当你在onChanged里调用setState修改的只是这个局部变量，外部的selectedCity根本没更新，所以Widget重建时还是用原来的空值，自然显示提示文本。

解决办法：通过回调同步外部状态 #

我们给_buildDropdown加一个回调函数，让下拉菜单把选中的值传递回外部，由外部的setState来更新真正的状态变量selectedCity。修改后的代码如下：

List<String> cities= ['Rome', 'London', 'Paris'];
String? selectedCity; // 改为可空类型，符合空安全规范
String title='Select a city';

Widget _buildDropdown(
  String menuTitle,
  String? selectedItem,
  List<String> list,
  // 新增回调参数：把选中值传递给外部
  Function(String?) onSelected,
) {
  return Container(
    width: MediaQuery.of(context).size.width * 0.8,
    margin: EdgeInsets.all(10.0),
    decoration: BoxDecoration(
        border: Border.all(color: Colors.grey[300]),
        borderRadius: BorderRadius.circular(10.0)),
    child: DropdownButtonHideUnderline(
      child: ButtonTheme(
        alignedDropdown: true,
        child: DropdownButton<String>(
          isExpanded: true,
          hint: Text(
            menuTitle.toUpperCase(),
            style: GoogleFonts.lato(
                textStyle: TextStyle(
                  color: Colors.grey[500],
                  fontWeight: FontWeight.bold,
                )),
          ),
          value: selectedItem,
          items: list.map((String val) {
            return DropdownMenuItem(
              value: val,
              child: Text(
                val.toUpperCase(),
                style: GoogleFonts.lato(
                    textStyle: TextStyle(
                      color: Colors.grey[500],
                    )),
              ),
            );
          }).toList(),
          // 直接使用外部传来的回调，把选中值传出去
          onChanged: onSelected,
        ),
      ),
    ),
  );
}

// 调用这个下拉菜单的时候，传入更新状态的逻辑
_buildDropdown(title, selectedCity, cities, (value) {
  setState(() {
    selectedCity = value;
  });
})

额外提示 #

把selectedCity改为String?（可空类型）是因为初始状态下没有选中值，这样更符合Flutter的空安全要求，避免潜在的空指针问题。

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