0

背景：你好。我刚刚开始学习 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
          },
        )
      ],
    ),

在此处输入图像描述

4

2 回答 2

1

您只需要在脚手架内添加抽屉属性。并从您的 Appbar 中删除领先。

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

不错的代码！

于 2021-01-19T02:40:04.003 回答
0

不需要一直使用leading属性AppBar。我们可以将其Dropdown放在相同的位置，而不会溢出title。通过这种方式，它为您自定义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)),
          ),
        ],
      ),
    );
于 2021-01-19T03:37:13.163 回答