Flutter DropdownButton 颜色与父 Widgets 相同
Posted
技术标签:
【中文标题】Flutter DropdownButton 颜色与父 Widgets 相同【英文标题】：Flutter DropdownButton same color as parent Widgets 【发布时间】：2018-09-30 14:37:51 【问题描述】：我一直在开发一个玩具提醒应用程序，并希望实现一个下拉菜单供用户选择给定的时间间隔。
我已经加载了按钮，并且可以在弹出正确的菜单时单击它。问题是屏幕上按钮的外观。与父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
)
)
],
)
],
),
);
【问题讨论】：
您是否将主题中的多个值设置为相同的颜色？ 不，我的主题非常简单：我只是设置了亮度、原色和强调色。 【参考方案1】：您是否尝试过将 Dropdown 包装在一个白色的容器中，然后只需确保 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,
),
【讨论】：
@EdwinLiu OP 希望它是白色背景。不过，使用上述方法，您可以完全自定义下拉菜单的主题，但不会影响应用的主题。 谢谢@AlanNegrete！包装主题是一个很好的解决方案。现在我可以睡个好觉了，今晚！【参考方案2】：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】：使用提示而不是值
例子
提示：dropdownValue == null ？ Text("选择一个", style: TextStyle(color: Colors.red)): Text(dropdownValue, style: TextStyle(color: Colors.green)),
dropdownValue 是我选择的值
【讨论】：
【参考方案4】：您可以使用以下代码将自定义颜色赋予 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,
),
【讨论】：
【参考方案5】：你可以这样做
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(),
),
),
)
【讨论】：
【参考方案6】：试试这个，并用主题颜色替换容器的颜色：
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
),
),
)
【讨论】：
以上是关于Flutter DropdownButton 颜色与父 Widgets 相同的主要内容，如果未能解决你的问题，请参考以下文章
Flutter：按钮下方的 DropDownButton 项
Dart / flutter：DropdownButton在值更改时导致异常
Flutter - 如何在小部件测试中选择 DropdownButton 项
Flutter GetBuilder Dependent DropDownButton - 即使值已被重置，也应该只有一项具有 [DropdownButton] 的值
如何像 Flutter 中的 Spinner 一样在 DropdownButton 下方打开 DropDown 对话框？