我一直在研究玩具提醒应用程序,希望为用户实现一个下拉菜单,以选择给定的时间间隔。
我已加载按钮,可以在弹出正确菜单的情况下单击它。问题是按钮在屏幕上的外观。它与父窗口小部件的颜色相同,并且根本不显示所选项目的文本。
如何获得具有白色背景和黑色文本的下拉按钮?
这是屏幕截图:
这是构建此 View 的代码:
@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
)
)
],
)
],
),
);
}
最佳答案
您是否尝试过将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,
),
关于drop-down-menu - Flutter DropdownButton与父窗口小部件的颜色相同,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49932130/