Question

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

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"),
          ),
        ),
      ),
    );
  }
}

Answer 1

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

Answer 2

只需计算以下各项的背景颜色：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 个答案: