DropDownButton 和 DropDownMenuItem 的不同样式

Posted 2023-02-23

【中文标题】DropDownButton 和 DropDownMenuItem 的不同样式

【英文标题】：Different style for DropDownButton and DropDownMenuItem

【发布时间】：2018-09-07 09:19:27

【问题描述】：

我正在 Flutter 中创建下面的注册表单。

TextStyle white =
    new TextStyle(color: Colors.white, decorationColor: Colors.white);
TextStyle grey =
    new TextStyle(color: Colors.grey, decorationColor: Colors.white);

我想将白色样式应用于 DropDownButton，将灰色应用于 DropDownMenuItem。 但是，DropDownMenu 项的样式也适用于 DDButton。

另外，我可以像 TextField 一样“match_parent”DropDownButton 的宽度（如图所示）吗？

代码如下：

     child: new Center(
      child: new ListView(
        shrinkWrap: true,
        padding: new EdgeInsets.only(left: 24.0, right: 24.0),
        children: <Widget>[
          new ListTile(
            leading: const Icon(
              Icons.language,
              color: Colors.white,
            ),
            title: new DropdownButton(
              items:
                  <String>['India', 'Australia', 'USA'].map((String value) 
                return new DropdownMenuItem<String>(
                  value: value,
                  child: new Text(value, ),
                );
              ).toList(),
              value: selected,
              onChanged: (String value) 
                setState(() 
                  selected = value;
                );
              ,
              style: white,
            ),
          ),
          new ListTile(
            leading: const Icon(Icons.smartphone, color: Colors.white),
            title: new TextField(
              decoration: new InputDecoration(
                  hintText: "Phone Number", hintStyle: white),
              keyboardType: TextInputType.phone,
              style: white,
            ),
          ),...

【问题讨论】：

你找到解决办法了吗？

请看看这个解决方法，它对我有用：***.com/a/46531089/1248887

【参考方案1】：

TextStyle 类中有 final bool inherit 属性，你可以试试这样：

TextStyle white =
new TextStyle(inherit: false, color: Colors.white, decorationColor: Colors.white);

【讨论】：

谢谢。我试试看

【参考方案2】：

您可以使用下拉列表的selectedItemBuilder 属性来做到这一点，目前的问题是您不能同时使用hintText 和 selectedItemBuilder。你可以追踪open issue here。

但是有一个临时的解决方法是根据所选的 dropdownValue 使用其中一个

   DropdownButton<String>(
              value: dropdownValue,
              style: TextStyle(color: Colors.grey, fontSize: 15),
              hint: dropdownValue != null
                  ? null
                  : Text(
                      'Select Value',
                      style: TextStyle(color: Colors.black),
                    ),
              onChanged: (value) => setState(() => dropdownValue = value),
              selectedItemBuilder: dropdownValue == null
                  ? null
                  : (BuildContext context) 
                      return ['ONE', 'TWO.', 'THREE'].map((String value) 
                        return Text(
                          dropdownValue,
                          style: TextStyle(color: Colors.green),
                        );
                      ).toList();
                    ,
              items: ['ONE', 'TWO.', 'THREE']
                  .map<DropdownMenuItem<String>>((String value) 
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value,
                      style: TextStyle(inherit: false, color: Colors.red)),
                );
              ).toList(),
            ),

你可以找到dartpad example here

【参考方案3】：

在 DropdownButton 中添加 isExpanded。

下拉按钮( isExpanded：真， )

【讨论】：

嗯，这对我有帮助！