簡體   English   中英

如何更改 DropdownButton 選擇的選項顏色?

[英]How to change DropdownButton selected option color?

我在 Flutter 中有一個 DropdownButton,我想更改所選選項的顏色(見圖)。 默認顏色為灰色。 我找不到 DropdownButton 的參數來改變它。 我在 ThemeData 中嘗試了selectedRowColor ,但它不會影響該顏色。 可以改變那個顏色嗎?

圖片

最小的可重現示例:

import 'package:flutter/material.dart';

main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        highlightColor: Colors.red,
      ),
      home: MyHome(),
    );
  }
}

class MyHome extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  List<String> options = ['A', 'B', 'C', 'D'];
  String selectedOption;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: DropdownButton(
          hint: Text('Please choose an option'),
          value: selectedOption,
          onChanged: (String newValue) {
            setState(() {
              selectedOption = newValue;
            });
          },
          items: options.map((option) {
            return DropdownMenuItem(
              child: Text(option),
              value: option,
            );
          }).toList(),
        ),
      ),
    );
  }
}
 .
 .
 ].map<DropdownMenuItem<String>>((String value) {
         return GestureDetector(
           onTap: () {
              setState() {
                _selectedItemValue = value;
              }
           } ,
           child:DropdownMenuItem<String>(
             value: value,
             child: Container(
               color: value == _selectedItemValue ? Colors.blue : Colors.white,
               child: new Text(
                 value,
                 style: TextStyle(color: Colors.white),
             ),),
         ),);
       }).toList(),

我找到了解決方案。 ThemeData中的focusColor正在影響此顏色。

如果我用Theme小部件包裝DropdownButton並更改focusColor參數,我會得到所需的結果。 或者直接在材質應用主題中設置focusColor

像這樣:

//...
Theme(
  data: Theme.of(context).copyWith(focusColor: Colors.red),
  child: DropdownButton(
    hint: Text('Please choose an option'),
    value: selectedOption,
    onChanged: (String newValue) {
      setState(() {
        selectedOption = newValue;
      });
    },
    items: options.map((option) {
      return DropdownMenuItem(
        child: Text(option),
        value: option,
      );
    }).toList(),
  ),
)
//...

結果:在此處輸入圖像描述

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM