Flutter如何为DropdownButtonFormField实现点击弹出选择对话框

实现方案 #

你可以通过拦截DropdownButtonFormField的点击事件，替换为触发你已经写好的自定义弹窗逻辑，再通过状态绑定实现回显，修改后的完整代码如下：

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dialog Box and return value',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<StatefulWidget> createState() {
    return MyHomePageState();
  }
}

class MyHomePageState extends State<MyHomePage> {
  String selectedLanguage = "";
  final javascript = "Java";
  final c = "C";
  final cpp = "C++";
  final python = "Python";

  @override
  Widget build(BuildContext context) {
    return Scaffold (
        appBar: AppBar(
            title: const Text("Flutter SimpleDialog Example")
        ),
        body: Container(
          color: Colors.grey,
          child: Center (
              child: Column (
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Container(
                      color: Colors.white,
                      height: 50,
                      width: 150,
                      // 新增GestureDetector拦截点击事件
                      child: GestureDetector(
                        onTap: () => showMyAlertDialog(context),
                        child: DropdownButtonFormField(
                          // 绑定选中值实现回显
                          value: selectedLanguage.isEmpty ? null : selectedLanguage,
                          items: const [],
                          hint: const Text("Select"),
                          // 禁用默认下拉逻辑
                          enabled: false,
                          // 去掉默认下划线
                          decoration: const InputDecoration(
                            border: InputBorder.none,
                            contentPadding: EdgeInsets.symmetric(horizontal: 10),
                          ),
                        ),
                      ),
                    ),
                  ]
              )
          ),
        )
    );
  }

  showMyAlertDialog(BuildContext context) {
    SimpleDialog dialog = SimpleDialog(
      title: const Text('Select a Language:'),
      children: <Widget>[
        SimpleDialogOption(
            onPressed: () {
              Navigator.pop(context, javascript);
            },
            child: Text(javascript)
        ),
        SimpleDialogOption(
          onPressed: () {
            Navigator.pop(context, c);
          },
          child:  Text(c),
        ),
        SimpleDialogOption(
          onPressed: () {
            Navigator.pop(context, cpp);
          },
          child:  Text(cpp),
        ),
        SimpleDialogOption(
          onPressed: () {
            Navigator.pop(context, python);
          },
          child:  Text(python),
        )
      ],
    );

    showDialog(
        context: context,
        builder: (BuildContext context) {
          return dialog;
        }
    ).then( (language) => {
      if(language != null) {
        setState(() {
          selectedLanguage = language;
        })
      }
    });
  }
}

核心修改说明 #

• 用GestureDetector包裹DropdownButtonFormField组件，点击时直接触发你写好的弹窗方法
• 给DropdownButtonFormField添加value属性绑定选中状态变量，选中结果会自动回显
• 将DropdownButtonFormField的enabled属性设为false，禁用组件自带的下拉菜单逻辑，避免和自定义弹窗冲突
• 新增空值判断，避免用户点击弹窗空白处关闭时出现异常

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