Flutter中如何微调Toolbar左移？添加SizedBox后Toolbar消失求助

问题原因 #

你添加actions: [SizedBox(width: 10)]后AppBar看似“消失”，是因为actions是AppBar的右侧操作区域，添加空白SizedBox只会在右侧增加间距，而你的AppBar背景色和Scaffold完全一致，原本仅有的左侧抽屉图标在视觉上和背景融为一体，导致看起来像是Toolbar消失了。而且这个方法本身就无法实现AppBar内容向左微调的需求。

正确实现方式 #

要让AppBar内容向左微调，可根据需求选择以下方案：

方案1：调整titleSpacing（整体内容左移）

titleSpacing控制leading与title之间的默认间距，设置为负数可让整个AppBar内容向左偏移：

appBar: AppBar(
  backgroundColor: Color(0xFFf8dbb9),
  shadowColor: Color(0xFFf8dbb9),
  elevation: 0,
  iconTheme: IconThemeData(color: Colors.black, size: 24),
  toolbarHeight: 100,
  titleSpacing: -8, // 负数越大，左移幅度越大
  // 若有标题可添加
  // title: Text("页面标题"),
),

方案2：自定义leading并添加偏移（仅调整抽屉图标）

如果只想让左侧抽屉图标左移，可自定义leading并通过padding控制位置：

appBar: AppBar(
  backgroundColor: Color(0xFFf8dbb9),
  shadowColor: Color(0xFFf8dbb9),
  elevation: 0,
  iconTheme: IconThemeData(color: Colors.black, size: 24),
  toolbarHeight: 100,
  leading: Padding(
    padding: EdgeInsets.only(left: -8), // 向左偏移，负数表示超出默认位置
    child: Builder(
      builder: (context) => IconButton(
        icon: Icon(Icons.menu),
        onPressed: () => Scaffold.of(context).openEndDrawer(),
      ),
    ),
  ),
),

方案3：修改leadingWidth（缩小leading区域宽度）

默认leadingWidth为56，减小该值可让leading图标自然左移：

appBar: AppBar(
  backgroundColor: Color(0xFFf8dbb9),
  shadowColor: Color(0xFFf8dbb9),
  elevation: 0,
  iconTheme: IconThemeData(color: Colors.black, size: 24),
  toolbarHeight: 100,
  leadingWidth: 40, // 数值越小，图标越靠左
),

内容的提问来源于stack exchange，提问作者user21971539