Flutter自定义下拉列表求助：弹窗触发与数据填充问题

嘿，我来帮你搞定这两个痛点！刚好之前做过类似的自定义下拉组件，给你一步步拆解解决方案：

一、点击InkWell唤起弹窗列表 #

你可以用Flutter自带的showModalBottomSheet（或者showDialog，前者更贴合下拉选择的交互体验），在InkWell的onTap回调里触发这个弹窗。弹窗里放置选择列表，用户选中后关闭弹窗并同步更新选中值即可。

二、传入字符串数组构建列表项 #

给你的InputDropdownList组件新增一个List<String>类型的参数（比如叫options），然后在弹窗里用ListView.builder遍历这个数组，动态生成每一项列表内容。

修改后的完整代码示例 #

首先是优化后的InputDropdownList组件：

class InputDropdownList extends StatelessWidget {
  final String labelText;
  final String valueText;
  final TextStyle valueStyle;
  final List<String> options; // 新增的选项数组参数
  final ValueChanged<String> onValueChanged; // 选中值回调

  const InputDropdownList({
    super.key,
    required this.labelText,
    required this.valueText,
    required this.valueStyle,
    required this.options,
    required this.onValueChanged,
  });

  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: 4,
      child: InkWell(
        onTap: () => _showOptionsModal(context), // 点击唤起弹窗
        child: InputDecorator(
          decoration: InputDecoration(
            labelText: labelText,
            border: const OutlineInputBorder(),
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(valueText, style: valueStyle),
              const Icon(Icons.arrow_drop_down),
            ],
          ),
        ),
      ),
    );
  }

  void _showOptionsModal(BuildContext context) {
    showModalBottomSheet(
      context: context,
      builder: (context) {
        return ListView.builder(
          shrinkWrap: true,
          itemCount: options.length,
          itemBuilder: (context, index) {
            final option = options[index];
            return ListTile(
              title: Text(option),
              onTap: () {
                onValueChanged(option); // 回调选中值给父组件
                Navigator.pop(context); // 关闭弹窗
              },
            );
          },
        );
      },
    );
  }
}

然后是使用这个组件的场景（结合你的viewModel逻辑）：

// 假设你的viewModel中维护了selectedValue，并有更新它的方法
InputDropdownList(
  labelText: "Select a value",
  valueText: viewModel.selectedValue,
  valueStyle: Theme.of(context).textTheme.bodyLarge!,
  options: ["Option A", "Option B", "Option C", "Option D"], // 传入自定义字符串数组
  onValueChanged: (newValue) {
    viewModel.updateSelectedValue(newValue); // 更新viewModel中的选中值
  },
)

补充小提示 #

• 如果你的viewModel基于ChangeNotifier实现，记得在更新selectedValue后调用notifyListeners()，这样UI才能同步刷新。
• 要是你更喜欢对话框样式的弹窗，把showModalBottomSheet换成showDialog，用AlertDialog包裹ListView即可，核心逻辑完全一致。

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