如何在 Flutter 中移除 AppBar 前导图标周围的额外填充答案

【问题标题】：How to remove extra padding around AppBar leading icon in Flutter如何在 Flutter 中移除 AppBar 前导图标周围的额外填充
【发布时间】：2018-10-31 19:20:16
【问题描述】：

在我的 Flutter 应用中，我有这个 AppBar

Widget setAppBar(){
  return new AppBar(
    title: addAppBarTextWidget('Explore'),
    elevation: 0.0,
    leading: addLeadingIcon(),
    actions: <Widget>[
      addAppBarActionWidget(Constant.iconNotification, 22.0, 16.0, 8.0),
      addAppBarActionWidget(Constant.iconProfile, 30.0, 30.0, 15.0)
    ],
  );
}

Widget addLeadingIcon(){
  return new Container(
    height: 25.0,
    width: 25.0,
    padding: const EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
    margin: const EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
    child: new Stack(
      alignment: AlignmentDirectional.center,
      children: <Widget>[
        new Image.asset(
          Constant.iconNotification,
          width: 25.0,
          height: 25.0,
        ),
        new FlatButton(
            onPressed: (){
              onLeadingShowCategoryClick();
            }
        )
      ],
    ),
  );
}

看起来像：

正如您在 AppBar 上看到的，周围有一些额外的填充领先的图标。我怎样才能删除这个额外的填充。

【问题讨论】：

拯救了我的一天，正在查看许多文章

标签： dart flutter flutter-layout

【解决方案1】：

对于 Sliver Appbar 填充

  sliver: SliverAppBar(
            pinned: true,
            expandedHeight: 400.0,
            flexibleSpace: FlexibleSpaceBar(
              centerTitle: false,
              titlePadding: EdgeInsets.zero,
              title: Text('Appbar'),
            ),
          ),

【讨论】：

【解决方案2】：

简答：

AppBar(
  leadingWidth: 8, // <-- Use this
  centerTitle: false, // <-- and this
  leading: Icon(Icons.android),
  title: Text('Title'),
)

更多自定义：

AppBar(
  leading: Transform.translate(
    offset: Offset(-15, 0),
    child: Icon(Icons.android),
  ),
  titleSpacing: -30,
  centerTitle: false,
  title: Text("Title"),
)

如果您不想使用任何领先的小部件：

AppBar(
  title: Text('Title'),
  centerTitle: false,
  titleSpacing: 0,
)

【讨论】：

设置leadingWidth 较小的值会使后退按钮无法点击

【解决方案3】：

 AppBar(
   centerTitle: false,
   automaticallyImplyLeading: false,
   titleSpacing: 0
 )

【讨论】：

【解决方案4】：

只需添加一个名为 titleSpacing 的属性，

样本

appBar: AppBar(
        leading: Icon(Icons.android),
        titleSpacing: 0,
        title: Text(widget.title),
      ),

【讨论】：

它删除标题前的填充/边距，而不是前导图标周围的额外填充。
我知道这可能不是 OP 问题的答案，而是我想要达到的结果的答案，即标题完全贴在左边，没有边距.
这应该是公认的答案。此解决方案保留应用栏的默认行为。默认情况下，应用栏根据导航器显示菜单按钮或返回按钮。看这里api.flutter.dev/flutter/material/AppBar/leading.html

【解决方案5】：

你可以试试这个，效果很好。当您设置leading = null 时，额外的前导小部件空间将被移除。

appBar: new AppBar(
        leading: null,
        titleSpacing: 0.0,
        title: new Text("title"),
      ),

【讨论】：

【解决方案6】：

只需设置 titleSpacing 和 automaticallyImplyLeading 即可删除空间

喜欢

AppBar(
        titleSpacing: 0,
        automaticallyImplyLeading: false,
)

【讨论】：

this帖子中提到了这两个属性，请不要添加相同的答案。

【解决方案7】：

如果您只需要像我一样将图标向左移动一点，您仍然可以使用leading 属性，只需在 IconButton 上设置对齐方式：

    leading: Builder(
      builder: (BuildContext context) {
        return IconButton(
          onPressed: () => Navigator.pop(context),
          icon: MyIcon(),
          alignment: Alignment(-0.5, 0.0), // move icon a bit to the left
        );
      },
    ),

【讨论】：

【解决方案8】：

利用 Adrian 的一些意见完成工作变通。

return Scaffold(
  key: _scaffoldKey,
  appBar: AppBar(
    titleSpacing: 0.0,
    title: Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        IconButton(
          icon: Icon(Icons.menu),
          onPressed: () => _scaffoldKey.currentState.openDrawer(),
        ),
        Stack(
          alignment: Alignment.center,
          children: <Widget>[
            IconButton(
              icon: Icon(Icons.mail_outline),
              onPressed: _onClickNotification,
            ),
            Positioned(
              top: 12.0,
              right: 10.0,
              width: 10.0,
              height: 10.0,
              child: Container(
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: AppColors.notification,
                ),
              ),
            )
          ],
        ),
        Expanded(
          child: Center(child: Text('test')),
        )
      ],
    ),
    automaticallyImplyLeading: false,
    centerTitle: true,
    actions: <Widget>[
      Row(
        children: <Widget>[
          Text('Online'),
          Switch(
            value: true,
            onChanged: (bool value) {},
          )
        ],
      )
    ],
  ),
  drawer: Drawer(
    child: _buildDrawer(),
  ),
  body: Container(
    color: Colors.orange,
  ),
);

【讨论】：

【解决方案9】：

如果您使用 Material 包中的小部件，它们的定义遵循 Material Design 规范 document。因此，如果您的修改违反了此规范，则必须构建自己的 Widget，而不是使用 Material Widget。

【讨论】：

在 Material Design 规范中，我没有阅读任何关于前导图标额外填充的内容。双方都有 16 dps。

【解决方案10】：

您不能这样做，因为它是一个预定义的小部件。但是，您可以这样做：

appBar: AppBar(
  automaticallyImplyLeading: false, // Don't show the leading button
  title: Row(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      IconButton(
        onPressed: () => Navigator.pop(context),
        icon: Icon(Icons.arrow_back, color: Colors.white),
      ),
      // Your widgets here
    ],
  ),
),

automaticallyImplyLeading: true 隐藏了前导 IconButton，因此您可以添加自己的小部件。

【讨论】：

非常感谢，我遇到了一些类似的问题，这很有帮助。顺便说一句，我通过这个解决方案修复了前导和尾随小部件的差距。
我想要一个只有两个按钮的应用栏。这有助于我进行主轴对齐。谢谢阿德里安。