带有后背按钮的Appbar中心

发布于 2025-02-13 10:10:43 字数 1124 浏览 0 评论 0原文

我将其存储在标题中的文本和图标中，这些文本和图标显示在中心的Appbar中。在过渡期间，出现的后退按钮占行的一部分，我的居中移动。我可以以某种方式解决这个问题，即使有一个后退按钮，也可以将标题为中心吗？

底部图标位于屏幕中心

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: BackButton(
        color: Colors.grey
   ), 
          elevation: 0,
          title: Center(
              child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(Icons.telegram_sharp, color: iconColor),
              Padding(
                  padding:
                      const EdgeInsets.symmetric(horizontal: 2, vertical: 2)),
              Text('ID', style: TextStyle(color: Colors.black, fontSize: 18)),
            ],
          ))),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: ListView(
          children: [
            _MainInfoWidget(),
          ],
        ),
      ),
    );
  }

原文

I store in the title the text and icon that are displayed in the AppBar in the center. During the transition, the back button that appears takes up part of the line and my centering shifts. Can I somehow get around this and make the titled centered even if there is a back button ?

The bottom icon is located in the center of the screen

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: BackButton(
        color: Colors.grey
   ), 
          elevation: 0,
          title: Center(
              child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(Icons.telegram_sharp, color: iconColor),
              Padding(
                  padding:
                      const EdgeInsets.symmetric(horizontal: 2, vertical: 2)),
              Text('ID', style: TextStyle(color: Colors.black, fontSize: 18)),
            ],
          ))),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: ListView(
          children: [
            _MainInfoWidget(),
          ],
        ),
      ),
    );
  }

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

铜锣湾横着走 2025-02-20 10:10:44

尝试一下

AppBar(
centerTitle: true

，

mainAxisSize: MainAxisSize.min

没有帮助，请更改

或者如果过渡发生时


mainAxiAlignment: MainAxisAlignment.start otherwise center

Try this

AppBar(
centerTitle: true

And

mainAxisSize: MainAxisSize.min

Or if that's not helped

When the transition occurs, change


mainAxiAlignment: MainAxisAlignment.start otherwise center

回复收藏 0 原文

秉烛思 2025-02-20 10:10:43

您需要在row（）：

MainAxisAlignment.center
MainAxisSize.min

和：
CenterTitle：true
在appbar（）上。
另外，请删除您的Center（）小部件。

完整示例：

Scaffold(
      appBar: AppBar(
          centerTitle: true,
          leading: BackButton(color: Colors.grey),
          elevation: 0,
          title: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(Icons.telegram_sharp, color: Colors.black),
              Padding(
                  padding:
                      const EdgeInsets.symmetric(horizontal: 2, vertical: 2)),
              Text('ID', style: TextStyle(color: Colors.black, fontSize: 18)),
            ],
          )),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Container(),
      ),
    );

结果：

You need to set the following properties on the Row():

MainAxisAlignment.center
MainAxisSize.min

And:
centerTitle: true
On the appBar().
Also, remove your Center() widget.

Complete example:

Scaffold(
      appBar: AppBar(
          centerTitle: true,
          leading: BackButton(color: Colors.grey),
          elevation: 0,
          title: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(Icons.telegram_sharp, color: Colors.black),
              Padding(
                  padding:
                      const EdgeInsets.symmetric(horizontal: 2, vertical: 2)),
              Text('ID', style: TextStyle(color: Colors.black, fontSize: 18)),
            ],
          )),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Container(),
      ),
    );

Result: