如何将 AppBar 上的按钮向左对齐?

在实现 AppBar 左对齐的功能之前，我们需要了解一下 AppBar 的布局方式和构成要素。

AppBar 的布局方式和构成要素

AppBar 是由以下三个要素构成的：

1. toolbar（工具栏）：通常是一个 Row 组件，包含了 AppBar 中所有的按钮、文本、图标等组件。

2. title（标题）：位于工具栏的中央，可以是文本或者一个图片。

3. bottom（底部导航区域）：位于工具栏的底部，可以是一个 TabBar 或其他组件。

AppBar 的默认布局方式是居中对齐，其中 title 组件居中显示，然后 toolbar 组件居中对齐。如果开发者想要实现 AppBar 上按钮的左对齐，则需要在 toolbar 组件上使用一个前缀组件来占用左侧空间。

实现 AppBar 上按钮左对齐的步骤

1. 创建一个 toolbar 组件，包含了 AppBar 中所有的按钮、文本、图标等组件。

AppBar(
  toolbar: Row(
    children: [
      IconButton(icon: Icon(Icons.menu), onPressed: () {...}),
      Text('MyApp'),
      IconButton(icon: Icon(Icons.search), onPressed: () {...}),
    ],
  ),
  title: Text('MyApp'),
);

2. 使用前缀组件来占用左侧空间。

在 toolbar 组件中添加 SizedBox 组件，并设置宽度等于 MediaQuery.of(context).padding.left。由于左侧空间可能会因为系统的状态栏、导航栏等组件的存在而发生变化，所以需要使用 MediaQuery.of(context).padding.left 获取左侧空间的大小。

AppBar(
  toolbar: Row(
    children: [
      SizedBox(
        width: MediaQuery.of(context).padding.left,
      ),
      IconButton(icon: Icon(Icons.menu), onPressed: () {...}),
      Text('MyApp'),
      IconButton(icon: Icon(Icons.search), onPressed: () {...}),
    ],
  ),
  title: Text('MyApp'),
);

通过添加一个 SizedBox 组件，将 IconButton 组件从左侧空间开始，从而实现了AppBar 上按钮的左对齐。