Flutter中如何在下拉菜单内创建radio button单选按钮？

你可以直接使用PopupMenuButton + RadioListTile组合实现该效果，不需要单独封装ListTile的单选逻辑，完整可运行示例如下：

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: '单选下拉菜单demo',
      home: Scaffold(
        appBar: AppBar(title: const Text('单选下拉菜单实现')),
        body: const Center(child: RadioDropdownDemo()),
      ),
    );
  }
}

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

  @override
  State<RadioDropdownDemo> createState() => _RadioDropdownDemoState();
}

class _RadioDropdownDemoState extends State<RadioDropdownDemo> {
  // 下拉选项列表，可根据需求替换为自定义实体类
  final List<String> _options = ['全部类型', '文字类', '图片类', '视频类', '音频类'];
  // 记录当前选中的项
  String? _selectedOption;

  @override
  Widget build(BuildContext context) {
    return PopupMenuButton<String>(
      // 自定义下拉触发按钮的样式
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        decoration: BoxDecoration(
          border: Border.all(color: Colors.grey.shade400),
          borderRadius: BorderRadius.circular(8),
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(_selectedOption ?? '请选择内容类型'),
            const SizedBox(width: 8),
            const Icon(Icons.arrow_drop_down, size: 20),
          ],
        ),
      ),
      // 下拉菜单的样式配置
      elevation: 2,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
      // 生成下拉选项
      itemBuilder: (BuildContext context) => _options.map((option) {
        return PopupMenuItem<String>(
          value: option,
          // 禁止默认的点击选中行为，交给RadioListTile的onChanged处理
          onTap: () {},
          child: RadioListTile<String>(
            value: option,
            groupValue: _selectedOption,
            title: Text(option),
            // 单选按钮显示在文字左侧
            controlAffinity: ListTileControlAffinity.leading,
            contentPadding: EdgeInsets.zero,
            dense: true,
            onChanged: (String? value) {
              setState(() {
                _selectedOption = value;
              });
              // 选中后关闭下拉菜单
              Navigator.pop(context);
            },
          ),
        );
      }).toList(),
    );
  }
}

自定义调整说明 #

• 要修改单选按钮的位置，调整controlAffinity参数即可，可选值包括leading（左）、trailing（右）、platform（跟随平台默认）
• 要修改下拉菜单的背景色、圆角、阴影，调整PopupMenuButton的color、shape、elevation参数即可
• 要给选项增加副标题、选中状态样式，直接扩展RadioListTile的subtitle、activeColor等参数即可
• 如果需要使用自定义实体类作为选项，把String泛型替换为你的实体类，同时重写实体类的==和hashCode方法保证单选状态判断正确

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