Flutter自定义标题下拉列表(材料页面过滤器) [英] Flutter Custom Title Dropdown (Material Page Filter)

问题描述

按照应用程序栏页面过滤器"的概念，我想放置一个 DropdownButton 作为 AppBar 的标题.我试过了，但是看起来不太好.

由于下划线看起来很奇怪，因此没有遵循上述链接中显示的材料模式...奖励:文本和按钮应该为白色.

解决方案

执行以下操作:

  appBar:AppBar(标题:行(mainAxisSize:MainAxisSize.min，mainAxisAlignment:MainAxisAlignment.center，子代:< Widget> [DropdownButton(值:_selectedItem，项目:_dropdownMenuItems，下划线:SizedBox(高度:0，)，//下划线:SizedBox()，onChanged:onChangeDropdownItem，)，]，)，)， 

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

 ///初始化下拉菜单List< DropdownMenuItem< String>>buildDropdownMenuItems(列表菜单){List< DropdownMenuItem< String>>项目= List();对于(菜单中的字符串li){items.add(DropdownMenuItem(值:li，子代:SizedBox(宽度:100，子代:Text(li，样式:TextStyle(color:labelColor，fontWeight:FontWeight.bold)，textAlign:TextAlign.center，溢出:TextOverflow.ellipsis，)，)，)，);}退换货品; 

}

Following the concept of the app bar "page filter" I'd like to put a DropdownButton as the title of the AppBar. I tried, but it doesn't look good.

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',
            ),
          ],
        ),
      ),
    );
  }
}

However it looks like:

which doesn't follow the material pattern found at the link stated above due to the weird looking underline... bonus: the text and button should be white.

解决方案

Do something like this:

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

Then change your dropdown menu's style here:

/// 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;

}

这篇关于Flutter自定义标题下拉列表(材料页面过滤器)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！