颤动自定义标题下拉列表(材质页面过滤器)

Question

按照应用栏"页面过滤器"的概念,我想把它DropdownButton作为标题AppBar.我试过了,但看起来并不好.

https://material.io/guidelines/layout/structure.html#structure-app-bar

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _value = 'one';

  @override
    void initState() {
      super.initState();
    }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new DropdownButton<String>(
          value: _value,
          items: <DropdownMenuItem<String>>[
            new DropdownMenuItem(
              child: new Text('one'),
              value: 'one',
            ),
            new DropdownMenuItem(
              child: new Text('two'),
              value: 'two'
            ),
          ], 
          onChanged: (String value) {
            setState(() => _value = value);
          },)
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text(
              'hello world',
            ),
          ],
        ),
      ),
    );
  }
}

但它看起来像:

由于奇怪的下划线,因此不遵循上述链接中找到的材料模式...奖励:文本和按钮应为白色.

Answer 1

我找到了一些事情,帮助我的情况......这些小部件DropdownButtonHideUnderline和Theme将有助于控制下拉如何看起来的标题AppBar

new AppBar(
  title: new Theme(
      child: new DropdownButtonHideUnderline(
      child: new DropdownButton<String>(
        value: _value,
        items: <DropdownMenuItem<String>>[
          new DropdownMenuItem(
            child: new Text('My Page'),
            value: 'one',
          ),
        ], 
        onChanged: (String value) {
          setState(() => _value = value);
        },
      ),
    ), 
    data: new ThemeData.dark(),
  ),
),

但是,现在弹出窗口的背景颜色是黑色以匹配黑暗主题...不确定是否有办法让主题不影响实际的弹出窗口.

我个人可以忍受弹出窗口的黑色背景颜色......除非有人也可以解决这个问题.

Answer 2

做这样的事情：

appBar: AppBar(
    title: Row(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        DropdownButton(
          value: _selectedItem,
          items: _dropdownMenuItems,
          underline: SizedBox(height: 0,),
          //underline: SizedBox(),
          onChanged: onChangeDropdownItem,
        ),
       ],
      ),
    ),

然后在此处更改下拉菜单的样式：

/// Initialize dropdown menu
List<DropdownMenuItem<String>> buildDropdownMenuItems(List menu) {
List<DropdownMenuItem<String>> items = List();
for (String li in menu) {
  items.add(
    DropdownMenuItem(
      value: li,
      child: SizedBox(
        width: 100, 
        child: Text(li, style:  TextStyle(color: labelColor, fontWeight: 
               FontWeight.bold), 
               textAlign: TextAlign.center, overflow: TextOverflow.ellipsis,),),
    ),
  );
}
return items;

}