Flutter联动Dropdown菜单使用Visibility组件出现空白问题求助

你遇到的空白问题，根源在于使用Visibility组件只是视觉上隐藏了不匹配的城市选项，但对应的DropdownMenuItem仍然存在于下拉列表中——这些不可见的item会占据列表空间，就出现了空白占位。

最优解决方案：动态过滤城市列表 #

正确的做法是直接根据选中的地区，过滤出对应的城市子集，只生成该子集的DropdownMenuItem，从根源上避免无效占位。

修改你的_buildCitiesRun方法如下：

Widget _buildCitiesRun(BuildContext context) {
  // 1. 过滤出当前选中地区对应的城市，处理数据未加载的空值情况
  final filteredCities = _citiesList?.where((city) => city["region_name"] == _selectedRegion)?.toList() ?? [];

  return DropdownButtonHideUnderline(
    child: DropdownButton<String>(
      hint: Text(
        AppLocalizations.of(context).translate('Select City'),
        style: normalBlack,
      ),
      isExpanded: true,
      style: editBoxLabel,
      value: _selectedCity,
      isDense: true,
      onChanged: (String newValue) {
        setState(() {
          _selectedCity = newValue;
          print('Selected City $_selectedCity');
        });
      },
      // 2. 仅用过滤后的城市列表生成下拉选项
      items: filteredCities.map((city) {
        return DropdownMenuItem<String>(
          value: city.toString(),
          child: Row(
            children: <Widget>[
              Text(
                city["name"][lanCode()].toString(),
                style: normalBlack,
                textAlign: TextAlign.center,
              ),
            ],
          ),
        );
      }).toList(),
    ),
  );
}

额外优化：切换地区时重置选中城市 #

当用户切换地区后，之前选中的城市可能不在新地区的城市列表中，建议在地区Dropdown的onChanged回调里重置_selectedCity，避免出现无效选中状态：

// 假设这是你的地区Dropdown的onChanged回调
onChanged: (String newRegion) {
  setState(() {
    _selectedRegion = newRegion;
    _selectedCity = null; // 切换地区后清空选中的城市
  });
}

这样修改后，下拉列表只会显示当前选中地区的有效城市，不会再有空白占位，同时保证了交互的一致性。

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