Dart 如何在flatter中删除AppBar引导图标周围的额外填充

在我的颤振应用程序中，我有一个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();
            }
        )
      ],
    ),
  );
}

Widget setAppBar（）{
返回新的AppBar(
标题：addAppBarTextWidget（“探索”），
标高：0.0，
前导：addLeadingIcon（），
行动：[
addAppBarActionWidget（Constant.iconNotification，22.0,16.0,8.0），
addAppBarActionWidget（Constant.iconProfile，30.0,30.0,15.0）
],
);
}
小部件addLeadingIcon（）{
退回新货柜(
身高：25.0，
宽度：25.0，
填充：从LTRB（0.0,0.0,0.0,0.0）开始的常量边集，
边距：LTRB（0.0,0.0,0.0,0.0）的常数边集，
子：新堆栈(
对齐：对齐方向.center，
儿童：[
新形象资产(
常量。i注释，
宽度：25.0，
身高：25.0，
),
新扁平按钮(
已按下：（）{
OnReadingShowCategoryClick（）；
}
)
],
),
);
}

它看起来像：

正如您在AppBar上看到的，在应用程序周围有一些额外的填充 领先的图标。我怎样才能去掉这个多余的填充物

---

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

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

appBar:appBar(
automaticallyImplyLeading:false，//不显示前导按钮
标题：世界其他地区(
mainAxisAlignment:mainAxisAlignment.start，
crossAxisAlignment:crossAxisAlignment.center，
儿童：[
图标按钮(
onPressed:（）=>Navigator.pop（上下文），
图标：图标（Icons.arrow\u back，颜色：Colors.white），
),
//你的小部件在这里
],
),
),

---

其中

automaticallyImplyLeading:true

隐藏了前面的

IconButton

，因此您可以添加自己的小部件。

只需添加一个名为titlespace的属性

样品

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

---

如果您使用Material package中的小部件，则它们是根据Material设计规范定义的。因此，如果您的修改违反了此规范，您必须构建自己的小部件，而不是使用Material小部件。

使用Adrian的一些输入完成工作

返回脚手架(
钥匙：_scaffoldKey，
appBar:appBar(
标题间距：0.0，
标题：世界其他地区(
mainAxisAlignment:mainAxisAlignment.start，
crossAxisAlignment:crossAxisAlignment.center，
儿童：[
图标按钮(
图标：图标（图标菜单），
按下时：（）=>\u scaffoldKey.currentState.openDrawer（），
),
堆叠(
对齐：对齐.center，
儿童：[
图标按钮(
图标：图标（Icons.mail\u outline），
onPressed:\u onclick通知，
),
定位(
排名：12.0，
右图：10.0，
宽度：10.0，
身高：10.0，
子：容器(
装饰：盒子装饰(
形状：BoxShape.circle，
颜色：AppColors.notification，
),
),
)
],
),
扩大(
子：中心（子：文本（“测试”）），
)
],
),
自动嵌入：false，
标题：对，
行动：[
划船(
儿童：[
文本（“在线”），
开关(
价值观：正确，
一旦更改：（布尔值）{}，
)
],
)
],
),
抽屉(
子项：_buildDrawer（），
),
主体：容器(
颜色：颜色。橙色，
),
);

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

    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
        );
      },
    ),

简短回答：

AppBar(
引线宽度：8，//只需设置
标题间距
和
自动嵌入
即可删除空间

像

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

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

它删除标题前的填充/边距，而不是标题图标周围的额外填充。我知道这可能不是OP问题的答案，但这是我想要实现的结果的答案，即标题完全贴在左边，没有边距。这应该是可接受的答案。此解决方案保留默认值应用程序栏的行为。默认情况下，应用程序栏显示菜单按钮或后退按钮，具体取决于导航器。请参见此处感谢您在材料设计规范中保存了我的一天，我没有读到任何关于主图标额外填充的内容。两侧都有16个dps。这两个属性都在文章中提到，请不要添加相同的答案。非常感谢，我遇到了一些类似的问题，这很有帮助。顺便说一句，我用这个解决方案修复了前导和尾随小部件的间隙。我想要一个只有两个按钮的应用程序栏。这有助于我进行主轴对齐。谢谢Adrian。节省了我的时间，正在检查许多文章设置前导宽度小值使后退按钮无法单击
AppBar(
        titleSpacing: 0,
        automaticallyImplyLeading: false,
)

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

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