material-design - Flutter 自定义标题下拉菜单( Material 页面过滤器)

标签 material-design flutter

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

但它看起来像: ios simulator

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

最佳答案

我确实找到了一些对我的情况有所帮助的东西... DropdownButtonHideUnderlineTheme 小部件将有助于控制下拉列表在 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(),
  ),
),

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

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

enter image description here enter image description here

关于material-design - Flutter 自定义标题下拉菜单( Material 页面过滤器),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49156899/

相关文章:

android - 在 Toolbar 和 Tablayout 之间获取高度

javascript - Material Design 表组件不支持动态行选择

android - 如何在 Material 设计的 NavigationView 中添加部分

当我在 Flutter 中使用 appBar 时,Android 导航栏颜色从默认的白色(在 Oreo 中)变为黑色,为什么?

javascript - 如何在 react-native-paper 的 Appbar.Header 中将标题居中?

android - 如何将 fragment 添加到自定义抽屉导航模板?

flutter - 如何在GridView中每6个不同的项目渲染一个图像?

dart - 如何在 Flutter/Dart 中读取(从磁盘)和调整图像大小

flutter - 找不到 Material 小部件。英雄动画不适用于 TextField

flutter - 如何在 Firestore 中使用时间戳值查询一整天