Flutter 自定义标题下拉（Material Page Filter）答案

【问题标题】：Flutter Custom Title Dropdown (Material Page Filter)Flutter 自定义标题下拉（Material Page Filter）
【发布时间】：2018-08-15 20:23:13
【问题描述】：

按照应用栏“页面过滤器”的概念，我想将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',
            ),
          ],
        ),
      ),
    );
  }
}

但它看起来像：

由于下划线看起来很奇怪，它不遵循上述链接中的材料模式......奖励：文本和按钮应该是白色的。

【问题讨论】：

> 不遵循上述链接中的材料模式，没有链接
而且我怀疑材料在 appbar 内有任何关于 DropDown 的规则；根据材料，appbar内只能使用字符串和图标。
@Darky 见上面的编辑（链接也在这里：material.io/guidelines/layout/structure.html#structure-app-bar）
在IOS上根据规范标题居中
@Darky 这非常没有帮助。我特别说，“忽略左右位置，因为它是在 iOS 中渲染的”

标签： material-design flutter

【解决方案1】：

做这样的事情：

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;

}

【讨论】：

【解决方案2】：

请将您的代码更改为我在下面提到的代码，这个代码可能适用于您的应用程序。，抱歉图片编辑不当。我已经包含了完整的代码供您参考。

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    home: new MyHomePage(),
  ));
}

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 Row(
         mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          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',
            ),
          ],
        ),
      ),
    );
  }
}

在此处查看演示：https://codepen.io/andrerpena/pen/LYpZRqG

【讨论】：

但现在文本是丑陋的灰色......我希望它是白色的，带有一个白色按钮。我能做到这一点的唯一方法是确保将亮度设置为黑暗（最简单的方法是将其全部包装在带有new ThemeData.dark()的主题中......这并不能解决问题（imo）
我在您的回答中添加了 Codepen 演示：codepen.io/andrerpena/pen/LYpZRqG

【解决方案3】：

要获得白色菜单，请将 data: new Theme.dark() 更改为 Theme.of(context).copyWith(brightness: Brightness.dark))

但是弹出另一个问题：菜单是白色的；但是菜单选项也是用白色写的，使它们无法阅读。

经过深入检查，目前似乎无法在 iddle 状态和下拉焦点时使用不同字体颜色的选项。考虑在他们的github 上创建一个问题

【讨论】：

【解决方案4】：

我确实找到了一些对我的情况有所帮助的东西...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(),
  ),
),

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

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

【讨论】：