使用后退按钮使 AppBar 居中

Question

我将显示在中心 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(),
          ],
        ),
      ),
    );
  }

Answer 1

您需要在 上设置以下属性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(),
      ),
    );

结果：