Flutter 如何更改下拉列表项颜色答案

【问题标题】：Flutter how change dropdownlist item colorFlutter 如何更改下拉列表项颜色
【发布时间】：2020-06-05 23:19:37
【问题描述】：

我想将小时列表中的值的颜色与所选列表中的数据一起设为黄色。这是下拉列表和屏幕截图的代码。我该怎么做。

import 'package:flutter/material.dart';


class deneme extends StatefulWidget {
  @override
  _denemeState createState() => _denemeState();
}

class _denemeState extends State<deneme> {
  List<String> hour = ["09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00"];
  List<String> selected = ["09:00", "12:00", "16:00"];
  int hourId;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Deneme"),
      ),
      body: Container(
        decoration: BoxDecoration(
            border: Border.all(color: Colors.blueAccent, width: 2),
            borderRadius: BorderRadius.all((Radius.circular(10)))),
        padding: EdgeInsets.symmetric(vertical: 4, horizontal: 24),
        margin: EdgeInsets.all(12),
        child: DropdownButtonHideUnderline(
          child: DropdownButton<int>(
            items: hour.map((h) {
              return DropdownMenuItem<int>(
                child: Text(
                  h,
                  style: TextStyle(fontSize: 24),
                ),
                value: hour.indexOf(h),
              );
            }).toList(),
            value: hourId,
            onChanged: (secilenOncelikId) {
              setState(() {
                hourId = secilenOncelikId;

              });
            },
            hint: Text("Select Hour"),
          ),
        ),
      ),
    );
  }
}

【问题讨论】：

标签： flutter drop-down-menu

【解决方案1】：

只需计算每个项目的背景颜色：var backgroundColor = (selected.contains(h)) ? Colors.yellow : Colors.white; 并将其分配到您现有的TextStyle：

child: DropdownButton<int>(
    items: hour.map((h) {
        var backgroundColor = (selected.contains(h)) ? Colors.yellow : Colors.white;

        return DropdownMenuItem<int>(
            child: Text(
                h,
                style: TextStyle(
                    fontSize: 24,
                    backgroundColor: backgroundColor,
                ),
            ),
            value: hour.indexOf(h),
        );
    }).toList(),
    value: hourId,
    onChanged: (secilenOncelikId) {
        setState(() {
        hourId = secilenOncelikId;
        });
    },
    hint: Text("Select Hour"),
),

结果：

【讨论】：

【解决方案2】：

您可以用彩色容器包装您的下拉菜单项子项（文本）的子项

【讨论】：