Flutter中如何在含嵌套列表的下拉选项内添加标签

需求说明 #

现有如下Dart数据结构：

List<Map<String, dynamic>> category = [
  {
    "name": "One",
    "detail": ['1', '1', '1', '1', '1', '1']
  },
  {
    "name": "two",
    "detail": ['2', '2', '2', '2', '2', '2']
  },
  {
    "name": "three",
    "detail": ['3', '3', '3', '3', '3', '3']
  },
];

需要将数据中的name作为下拉选项里的加粗分组标题，detail中的内容作为对应分组下的普通子选项，实现分组展示的下拉选择效果。

实现代码 #

可以通过DropdownButton结合RichText来实现该效果，以下是完整示例：

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(
      home: Scaffold(
        appBar: AppBar(title: const Text('分组下拉菜单')),
        body: const Center(child: GroupedDropdown()),
      ),
    );
  }
}

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

  @override
  State<GroupedDropdown> createState() => _GroupedDropdownState();
}

class _GroupedDropdownState extends State<GroupedDropdown> {
  // 原始数据
  final List<Map<String, dynamic>> category = [
    {
      "name": "One",
      "detail": ['1', '1', '1', '1', '1', '1']
    },
    {
      "name": "two",
      "detail": ['2', '2', '2', '2', '2', '2']
    },
    {
      "name": "three",
      "detail": ['3', '3', '3', '3', '3', '3']
    },
  ];

  // 选中的值
  String? selectedValue;

  // 构建下拉选项列表
  List<DropdownMenuItem<String>> _buildDropdownItems() {
    List<DropdownMenuItem<String>> items = [];
    for (var group in category) {
      // 添加分组标题（不可选中）
      items.add(DropdownMenuItem(
        enabled: false,
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 4),
          child: RichText(
            text: TextSpan(
              text: group['name'],
              style: const TextStyle(
                fontWeight: FontWeight.bold,
                color: Colors.black87,
                fontSize: 16,
              ),
            ),
          ),
        ),
      ));
      // 添加分组下的子选项
      for (var detail in group['detail']) {
        items.add(DropdownMenuItem(
          value: detail,
          child: Padding(
            padding: const EdgeInsets.only(left: 16),
            child: Text(detail),
          ),
        ));
      }
      // 添加分组间的分隔线
      items.add(const DropdownMenuItem(
        enabled: false,
        child: Divider(height: 1),
      ));
    }
    // 移除最后多余的分隔线
    if (items.isNotEmpty) items.removeLast();
    return items;
  }

  @override
  Widget build(BuildContext context) {
    return DropdownButton<String>(
      value: selectedValue,
      hint: const Text('请选择'),
      isExpanded: true,
      items: _buildDropdownItems(),
      onChanged: (value) {
        setState(() {
          selectedValue = value;
        });
      },
      padding: const EdgeInsets.symmetric(horizontal: 16),
    );
  }
}

代码说明 #

• 遍历原始数据，先为每个分组添加加粗的标题项，设置enabled: false使其不可选中
• 遍历分组下的detail列表，添加可选中的普通子选项，通过左内边距区分层级
• 用Divider分隔不同分组，提升视觉区分度
• 移除末尾多余的分隔线，避免界面冗余

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