Flutter 中的 DropdownButton 溢出答案

【问题标题】：Overflowed By with DropdownButton in FlutterFlutter 中的 DropdownButton 溢出
【发布时间】：2021-04-23 08:02:25
【问题描述】：

背景：您好。我刚开始学习 Flutter，在我正在构建的应用程序的左上角尝试创建下拉菜单时遇到了溢出错误。

问题： 如何准确格式化应用程序左上角的下拉菜单。我希望菜单与左侧屏幕的一侧齐平，并且图标位于相对于最右侧图标的对称相反位置，如附图中所示。以前，我有一个 IconButton 而不是 DropdownButton，而 IconButton 本身是自动正确定位的。我还想正确地将菜单图标居中，因为如您所见，它略微偏离中心垂直。

代码：

appBar: AppBar(
      leading: DropdownButton(icon: Icon(Icons.menu, color: colorPalette.chooseColor('black')), items: [DropdownMenuItem(child: Text('Events'),],),
      centerTitle: true,
      title: Text('Some Title', style: TextStyle(color: colorPalette.chooseColor('black'), fontSize: 23),),
      actions: <Widget>[
        IconButton(
          icon: Icon(Icons.map_outlined,  
          ),
          onPressed: () {
            // do something
          },
        )
      ],
    ),

【问题讨论】：

标签： flutter flutter-layout dropdownbutton

【解决方案1】：

您只需要在脚手架内添加 drawer 属性。并从您的 Appbar 中删除 leading。

Scaffold(
  appBar: AppBar(title: Text(title)),
  body: Center(child: Text('My Page!')),
  drawer: Drawer(
  child: ListView(
  children: <Widget>[
  //here you can customize the menu with the widgets you want. Example:
    ListTile(
    title: Text("Item 1"),
    trailing: Icon(Icons.arrow_forward),
       ),
     ],
    ),
  ),

代码不错！

【讨论】：

不完全回答这个问题，但很好的选择！谢谢 :) 甚至不确定是否可以使用 DropdownButton？
另外，这似乎没有包裹抽屉的内容。我只想在里面放 4 个可点击的单词，但抽屉比较大。
@MAF 请在下面查看我的答案
我想，@Bach 的回答可以解决你的问题。试试他的代码。

【解决方案2】：

没有必要一直使用AppBar 的leading 属性。我们可以只使用title 将Dropdown 放在同一位置而不会溢出。通过这种方式，您可以灵活地自定义 AppBar 小部件：

AppBar(
      leadingWidth: 0,
      automaticallyImplyLeading: false,
      title: Stack(
        alignment: AlignmentDirectional.center,
        children: [
          Positioned(
            left: 0,
            child: DropdownButton(
                // ... other lines
                ),
          ),
          Container(
            width: MediaQuery.of(context).size.width,
            alignment: Alignment.center,
            child: Text(
              'Some Title',
              // ... other lines
            ),
          ),
          Positioned(
            right: 0,
            child: IconButton(icon: Icon(Icons.map_outlined)),
          ),
        ],
      ),
    );

【讨论】：