Flutter实现下拉列表项文字颜色各不相同的方法

Flutter 实现方案 #

核心思路是给每个DropdownMenuItem的Text组件单独设置文字颜色，具体步骤如下：

1. 定义包含选项名称和对应颜色的数据列表：

final List<Map<String, dynamic>> dropdownItems = [
  {'name': 'item1', 'color': Colors.red},
  {'name': 'item2', 'color': Colors.blue},
  {'name': 'item3', 'color': Colors.grey},
];

2. 渲染DropdownButton，遍历数据列表生成带自定义颜色的选项：

String? selectedItem;

DropdownButton<String>(
  value: selectedItem,
  onChanged: (String? newValue) {
    setState(() {
      selectedItem = newValue;
    });
  },
  items: dropdownItems.map((item) {
    return DropdownMenuItem<String>(
      value: item['name'],
      child: Text(
        item['name'],
        style: TextStyle(color: item['color']),
      ),
    );
  }).toList(),
)

Android 原生（Kotlin）实现方案 #

通过自定义Spinner Adapter，重写getDropDownView方法设置下拉选项的文字颜色：

1. 定义选项数据类：

data class DropdownItem(val name: String, val color: Int)

2. 实现自定义Adapter：

class CustomSpinnerAdapter(
    context: Context,
    private val items: List<DropdownItem>
) : ArrayAdapter<DropdownItem>(context, android.R.layout.simple_spinner_item, items) {

    override fun getDropDownView(position: Int, convertView: View?, parent: ViewGroup): View {
        val view = super.getDropDownView(position, convertView, parent)
        val textView = view.findViewById<TextView>(android.R.id.text1)
        textView.setTextColor(items[position].color)
        return view
    }

    // 可选：如果需要选中后的按钮文字也对应颜色，重写getView方法
    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
        val view = super.getView(position, convertView, parent)
        val textView = view.findViewById<TextView>(android.R.id.text1)
        textView.setTextColor(items[position].color)
        return view
    }
}

3. 在Activity中绑定Adapter：

val items = listOf(
    DropdownItem("item1", Color.RED),
    DropdownItem("item2", Color.BLUE),
    DropdownItem("item3", Color.GRAY)
)
val spinner = findViewById<Spinner>(R.id.spinner)
spinner.adapter = CustomSpinnerAdapter(this, items)

iOS（Swift）实现方案 #

使用UIMenu给每个UIAction设置文字颜色，绑定到UIButton作为下拉按钮：

// 创建带颜色的下拉选项
let item1Action = UIAction(title: "item1") { _ in
    // 处理item1选中逻辑
}
item1Action.attributes.titleTextAttributes = [.foregroundColor: UIColor.red]

let item2Action = UIAction(title: "item2") { _ in
    // 处理item2选中逻辑
}
item2Action.attributes.titleTextAttributes = [.foregroundColor: UIColor.blue]

let item3Action = UIAction(title: "item3") { _ in
    // 处理item3选中逻辑
}
item3Action.attributes.titleTextAttributes = [.foregroundColor: UIColor.gray]

// 组装菜单并绑定到按钮
let dropdownMenu = UIMenu(title: "", children: [item1Action, item2Action, item3Action])
dropdownButton.menu = dropdownMenu
dropdownButton.showsMenuAsPrimaryAction = true

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