Flutter DropdownButton与父Widgets颜色相同
chr*_*788 5 colors drop-down-menu flutter
我一直在研究玩具提醒应用程序,并希望为用户实现一个下拉菜单,以选择给定的时间间隔.
我已经加载了按钮,可以弹出正确的菜单点击它.问题是屏幕上按钮的外观.它与父Widget颜色相同,根本不显示所选项目的文本.
如何让下拉按钮具有白色背景和黑色文本？
这是一个截图:
以下是构建此视图的代码:
@override
Widget build(BuildContext context) {
return new Container(
child: new Row(
children: <Widget>[
new Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
_buildInformationRow(),
_buildReminderRow(),
],
)
)
],
)
);
}
Widget _buildInformationRow() {
return new Container(
padding: const EdgeInsets.all(10.0),
child: new Row(
children: <Widget>[
new Column(
children: <Widget>[
new Container(
padding: const EdgeInsets.all(10.0),
child: new Text(
"This app can remind you to do stuff\non a regular basis",
style: new TextStyle(
color: Colors.white,
fontSize: 18.0,
)
),
)
],
)
],
),
);
}
Widget _buildReminderRow() {
return new Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Column(
children: <Widget>[
new Container(
child: new Text(
"Remind me",
style: new TextStyle(
color: Colors.white,
fontSize: 18.0,
)
),
)
],
),
new Column(
children: <Widget>[
new Container(
child: new DropdownButton<String>(
style: new TextStyle(
color: Colors.black,
fontSize: 18.0,
),
items: <String>["Never", "Daily", "Hourly", "Every 30 Minutes"].map((String value) {
return new DropdownMenuItem <String>(
value: value,
child: new Text(value)
);
}).toList(),
onChanged: null
)
)
],
)
],
),
);
}
Ala*_*ete 11
您是否尝试将Dropdown包装在具有白色的Container中,然后确保DropdownButton样式属性上的子项具有黑色的TextStyle.
new Container(
color: Colors.white,
child: DropdownButtonHideUnderline(
child: ButtonTheme(
alignedDropdown: true,
child: DropdownButton<T>(
items: dropdownItems,
onChanged: this.onChanged,
value: this.preSelected,
style: new TextStyle(
color: Colors.black,
),
),
)
),
),
注意:我使用ButtonTheme确保下拉列表填充Container的宽度.
您还可以围绕主题包装容器,以在活动时显示实际下拉列表的背景并显示菜单项.
new Theme(
data: Theme.of(context).copyWith(
canvasColor: Theme.of(context).primaryColor
),
child: // Your Dropdown Code Here,
),
Theme(
data: new ThemeData(
canvasColor: Colors.red,
primaryColor: Colors.black,
accentColor: Colors.black,
hintColor: Colors.black),
child: DropdownButton(
iconEnabledColor: Colors.white,
style: TextStyle(color: _selectedColor,fontSize: 16),
underline: Text(''),
value: selectedCurrency,
isExpanded: true,
iconSize: 40,
items: currencies.entries
.map<DropdownMenuItem<String>>(
(MapEntry<String, String> e) =>
DropdownMenuItem<String>(
value: e.key,
child: Text(e.value),
))
.toList(),
onChanged: (String newKey) {
setState(() {
_selectedColor = Colors.white;
selectedCurrency = newKey;
});
},
))
使用提示而不是值
例子
提示：dropdownValue == null ？Text("选择一个", style: TextStyle(color: Colors.red)): Text(dropdownValue, style: TextStyle(color: Colors.green)),
dropdownValue 是我选择的值