我该如何在Flutter中自定义DropdownButtons和DropdownMenuItems？

Question

DropdownMenuItems的默认DropdownButton返回浅灰色下拉列表.我应该如何自定义下拉列表(例如背景颜色,下拉宽度)？我可以style在DropdownButton和DropdownMenuItem中更改属性,如下所示:

return new DropdownButton(
      value: ...,
      items: ...,
      onChanged: ...,
      style: new TextStyle(
        color: Colors.white,
      ),
    );

但这不会改变下拉列表的背景颜色.

我应该复制DropdownMenu并扩展吗？Flutter是否计划在不久的将来为此小部件添加自定义？

Answer 1

我能够通过将 Dropdown 包装在Container带有color属性集的a 中来更改它的背景。

前：

后：

这是代码：

Container(
  padding:
      EdgeInsets.symmetric(horizontal: 10, vertical: 5),
  decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(10)),

  // dropdown below..
  child: DropdownButton<String>(
      value: dropdownValue,
      icon: Icon(Icons.arrow_drop_down),
      iconSize: 42,
      underline: SizedBox(),
      onChanged: (String newValue) {
        setState(() {
          dropdownValue = newValue;
        });
      },
      items: <String>[
        'One',
        'Two',
        'Three',
        'Four'
      ].map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(value),
        );
      }).toList()),
)

Answer 2

您可以通过包装做到这一点DropdownButton的一个Theme小部件和重写canvasColor.

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  State createState() => new MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  int _value = 42;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new Theme(
          data: Theme.of(context).copyWith(
            canvasColor: Colors.blue.shade200,
          ),
          child: new DropdownButton(
            value: _value,
            items: <DropdownMenuItem<int>>[
              new DropdownMenuItem(
                child: new Text('Foo'),
                value: 0,
              ),
              new DropdownMenuItem(
                child: new Text('Bar'),
                value: 42,
              ),
            ],
            onChanged: (int value) {
              setState(() {
                _value = value;
              });
            },
          ),
        ),
      ),
    );
  }
}

Answer 3

正如Collin所说，您DropdownMenuItem将跟随您的ThemeData课堂。它不仅backgroundColor会与canvasColor您ThemeData班级中的匹配，而且也会遵循相同的TextStyle。

因此，举个简单的例子：

new ThemeData(
        fontFamily: "Encode Sans", //my custom font
        canvasColor: _turquoise, //my custom color
//other theme data)

此外，如果您要控制width菜单的，可以为其child提供新属性Container并添加所需的属性width，请检查以下GIF，我首先进行了操作，width: 100.0然后将其更改为200.0，然后进行热重装，注意如何width操作，只需确保使用合适的宽度，这样以后在更复杂的布局中使用菜单时就不会出现溢出问题。

class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title:new Text ("Test"),
      ),
      body: new Center(
        child: new DropdownButton(items: new List.generate(20, (int index){
          return new DropdownMenuItem(child: new Container(
            child: new Text ("Item#$index"),
            width: 200.0, //200.0 to 100.0
          ));
        })
            , onChanged: null)
      ),
    );
  }
}

Answer 4

如果您希望 DropdownButton 填充它所在的空间，请使用该属性isExpanded并将其设置为true

DropdownButton<String>(
   isExpanded: true,
)

Answer 5

你可以在最新版本的 Flutter 中做一些非常简单的事情。

DropdownButton 类有一个名为“dropdownColor”的内置变量，它可以直接分配您需要的任何颜色，而无需更改任何“ThemeData”。也会自动更改下拉菜单项的颜色。

Answer 6

使用这个颜色

 DropdownButtonFormField(
              items: null,
              onChanged: null,
              dropdownColor: Colors.red,
            ),