我一直致力于玩具提醒应用，并希望为用户实施一个下拉菜单，以选择给定的时间间隔。
我已加载按钮，可以弹出正确的菜单点击它。问题是屏幕上按钮的外观。它与父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
)
)
],
)
],
),
);
}
答案 0 :(得分：8)
您是否尝试将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确保下拉列表填充容器的宽度。
您还可以围绕主题包装容器，以在活动时显示实际下拉列表的背景并显示菜单项。
new Theme(
data: Theme.of(context).copyWith(
canvasColor: Theme.of(context).primaryColor
),
child: // Your Dropdown Code Here,
),
答案 1 :(得分：2)
使用提示代替值
示例
提示：dropdownValue == null？ Text（“选择一个”，样式：TextStyle（颜色：Colors.red））：Text（下拉值，样式：TextStyle（颜色：Colors.green）），
dropdownValue是我选择的值
答案 2 :(得分：0)
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;
});
},
))
答案 3 :(得分：0)
您可以使用以下代码将自定义的颜色赋予DropDownButton提示
DropdownButton<String>(
isExpanded: true,
hint: Text('Your hint',style: TextStyle(color: Color(0xFFF5F5F5)),),
icon: Icon(Icons.arrow_downward),
iconSize: 20,
elevation: 12,
style: TextStyle(color: Colors.lightBlue),
underline: Container(
height: 0,
),
items: _currencies
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(
value,
style: TextStyle(fontSize: 14.0, color: Color(0xFFF5F5F5)),
),
);
}).toList(),
onChanged: (String valueSelected) {
onDropDownItemChanged(valueSelected);
},
value: dropdownValue,
//00000value: dropdownValue,
),
答案 4 :(得分：0)
您可以通过
DropdownButtonHideUnderline(
child: Theme(
data: ThemeData(
primaryColor: Colors.white,
),
child: DropdownButton<String>(
isExpanded: true,
value: _selectedMetalColor,
onChanged: (String newValue) {
setState(() {
_selectedMetalColor = newValue;
//dropdownValue = newValue;
});
},
// hint: Text(
// teethMetalColors[0],
// style: TextStyle(
// color: Colors.white,
// ),
// ),
icon: Container(
margin: EdgeInsets.only(right: 12.0),
child: Icon(
// Add this
Icons.keyboard_arrow_down, // Add this
color: Colors.white, // Add this
size: 35.0,
),
),
style: TextStyle(
color: Colors.black, fontSize: 16.0),
selectedItemBuilder:
(BuildContext context) {
return teethMetalColors
.map((String value) {
return Padding(
padding: const EdgeInsets.only(
top: 12.0, left: 16.0),
child: Text(
_selectedMetalColor,
style:
TextStyle(color: Colors.white),
),
);
}).toList();
},
items: teethMetalColors
.map<DropdownMenuItem<String>>(
(String value) {
return DropdownMenuItem<String>(
value: value,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
value,
style:
TextStyle(color: Colors.black),
),
),
);
}).toList(),
),
),
)
答案 5 :(得分：0)
试试这个，并在主题颜色中替换容器的颜色：
Container(
padding: const EdgeInsets.only(left: 0.0, right: 10.0),
decoration: BoxDecoration(
color: Colors.cyanAccent,
),
child: DropdownButtonHideUnderline(
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
),
),
)