[英]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.