如何将 flutter app bar logo 移动到中间左侧

Question

我想在应用栏上显示一个标志，我通过下面的代码实现了。

 appBar: AppBar(
      backgroundColor: Colors.white,
      elevation: 3,
      title: Align(
        alignment: Alignment.centerLeft,
        child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Align(
                alignment: Alignment.centerLeft,
                child: Image.asset(
                  'assets/logo/logo.jpg',
                  fit: BoxFit.fitWidth,
                  height: MediaQuery.of(context).size.height * 0.3,
                  width: MediaQuery.of(context).size.width * 0.2,
                ),
              ),
            ]),
      )),

正在输出

The problem here is The icon is centered how can I stick to the right like this

期望输出

As in the above code I already tried

 alignment: Alignment.centerLeft,

crossAxisAlignment: CrossAxisAlignment.start,

仍然无法正常工作有人知道吗？请多多支持

Answer 1

试试下面的代码希望对你有帮助。只需更改操作标签内的小部件（如您的图片）

Scaffold(
  appBar: AppBar(
    title:Image.network(
      'https://image.shutterstock.com/image-photo/kiev-ukraine-may-03-2015-260nw-275974145.jpg',
    ),
    automaticallyImplyLeading:false,
    actions: <Widget>[
      Icon(Icons.add),
      Icon(Icons.person),
    ],
  ),
)

您的结果屏幕->

Answer 2

看来您的代码已经差不多完成了。这是将您的徽标放在应用栏左侧的代码段。

AppBar(
      backgroundColor: Colors.white,
      elevation: 3,
      title: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Image.asset(
              'assets/nividata-logo.png',
              fit: BoxFit.fitWidth,
              height: MediaQuery.of(context).size.height * 0.3,
              width: MediaQuery.of(context).size.width * 0.2,
            ),
          ])),

好的，如您所见，我刚刚使用了 row 并将 mainAxisAlignment 设为开始，这样将从一开始就将每个元素放在 row 中。

如果我将其更改为下面的代码，那么它将从右侧（末端）开始放置元素。

mainAxisAlignment: MainAxisAlignment.end,

您还可以在下面的屏幕截图中查看我使用上述代码获得的结果。

Answer 3

是的，从其中一条评论中得到了答案。 automaticallyImplyLeading:false。这解决了问题

Answer 4

这仅仅是因为当您从其他页面导航时应用程序栏应用了默认行距，并且不知何故该行首图标为白色。

If you enable the Show Boundaries in the Dev tools you can see the Default leading icon is taking that blank spot.

这个问题有两种可能的结果。

You can change the color to any visible color.

- This will help the user to navigate back.

You can try to set the "automaticallyImplyLeading" property to "false" in the "Appbar" Widget.

- This will disable the default leading icon in the Appbar.

如何将 flutter app bar logo 移动到中间左侧

How to move the flutter app bar logo to center left

appbar

flutter

这仅仅是因为当您从其他页面导航时应用程序栏应用了默认行距，并且不知何故该行首图标为白色。

这个问题有两种可能的结果。