Question

我在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。

另外，我可以“匹配_parent”DropDownButton的宽度，如TextField（如图像中所示）？

以下是代码：

     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,
            ),
          ),...

Answer 1

final bool inherit类有TextStyle属性，您可以尝试这样的内容：

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

Answer 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

Answer 3

在DropdownButton中添加isExpanded。

DropdownButton（ isExpanded：是的，）

DropDownButton和DropDownMenuItem的不同样式

3 个答案: