如何在Flutter中将AppBar标题放在左侧

Question

这是我的AppBar标题的代码，但它没有生效。

 Widget build(BuildContext context){
return new Scaffold(
  appBar: new AppBar(
    title: new Padding(
      padding: const EdgeInsets.only(left: 20.0),
      child: new Text("App Name"),
    ),
  ),
);}

- user8354119

Answer 1

将centerTitle属性设置为false。

- Patrick Lumenus

---

似乎没有设置 leadingwidth 就无法正常工作。 - West

Answer 2

Transform是用于在x-y-z维度中强制转换小部件的小部件。

return Scaffold(
        appBar: AppBar(
          centerTitle: false,
          titleSpacing: 0.0,
          title:  Transform(
              // you can forcefully translate values left side using Transform
              transform:  Matrix4.translationValues(-20.0, 0.0, 0.0),
              child: Text(
                "HOLIDAYS",
                style: TextStyle(
                  color: dateBackgroundColor,
                ),
              ),
            ),
        ),
      );

- Jay Mungara

---

如果有人在使用 SliverAppBar -> FlexibleSpaceBar，也要在 FlexibleSpaceBar 中设置 centerTitle: false。 - Sabeer

您还可以使用负值来设置标题间距。 - Arunjith R S

@Nilesh Athghara的回答是最优雅的答案，并包含一个可工作的示例。我建议使用这个答案而不是上面的旧答案。 - Kyle Hayes

Answer 3

将AppBar中的centerTile属性设置为false，leadingWidth: 0。

- Bijoya_Banik

---

为了获得相同尺寸的前导小部件： leadingWidth：NavigationToolbar.kMiddleSpacing， - Skander Hamdi

Answer 4

在AppBar小部件中，只需将centerTile属性设置为false即可。

 AppBar(
        ...
        centerTitle: false,
        title: Text("App Name"),
        ...
        )

- Nilesh Athghara

Answer 5

默认情况下，AppBar标题位于中心位置。要使文本居左，您应该将centerTitle属性设置为false，如下所示：

Widget build(BuildContext context){
  return new Scaffold(
    appBar: new AppBar(
      centerTitle: false
      title: new Padding(
        padding: const EdgeInsets.only(left: 20.0),
        child: new Text("App Name"),
      ),
    ),
  );
}

- Nasir Uddin

Answer 6

如果你想要将标题显示在应用栏的最左侧

Widget build(BuildContext context){
  return new Scaffold(
    appBar: new AppBar(
      centerTitle: false,
      leadingWidth: 0, // this is also im
      title: new Padding(
        padding: const EdgeInsets.only(left: 25.0),
        child: new Text("App Name"),
      ),
    ),
  );
}

将文本强制放到应用栏的最左边

- Tushar Kshirsagar

Answer 7

appBar: AppBar(
  centerTitle: false,
  backgroundColor: Color(0xff98A8D0),
  title: Image.asset(
    'assets/covalent_dark_icon.png',
    height: 45,
    width: 120,
  ),
)

这是实际的方法。使用Transform会使您的用户界面反应更慢。

- Kartik Kumar

Answer 8

对我来说，指定 automaticallyImplyLeading: false 修复了这个问题。

- daniel eidlin

Answer 9

使用titleSpacing来进行左偏移（填充）。但这并不是最佳方法，我只是想展示另一种方式。

AppBar(
           ...
           centerTitle: false,
           titleSpacing: -40,
           title: Text("App Name"),
           ...
           ),

- India_Ink

---

请记住，Stack Overflow不仅意在解决当前的问题，而且还要帮助未来的读者找到类似问题的解决方案，这需要理解代码的基本原理。对于我们社区中的初学者和对语法不熟悉的人来说，这尤为重要。鉴于此，你能否编辑你的回答，包括对你所做的操作的解释以及你认为这是最佳方法的原因？ - Jeremy Caney

你应该添加解释。 - Super Kai - Kazuya Ito