与父窗口小部件的颜色相同

与父窗口小部件的颜色相同

我一直在研究玩具提醒应用程序,希望为用户实现一个下拉菜单,以选择给定的时间间隔。

我已加载按钮,可以在弹出正确菜单的情况下单击它。问题是按钮在屏幕上的外观。它与父窗口小部件的颜色相同,并且根本不显示所选项目的文本。

如何获得具有白色背景和黑色文本的下拉按钮?

这是屏幕截图:

drop-down-menu - Flutter DropdownButton与父窗口小部件的颜色相同-LMLPHP

这是构建此 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/

10-13 07:41