标题小部件居中，图标小部件在一行的右侧

Question

这个问题和this post完全一样

但我没有从帖子中找到答案。

我的目标是在中心设置标题小部件

和右侧的其他两个按钮。 链接中的解决方案都将标题小部件稍微放在左侧。

有谁知道如何在不使用 Stack 的情况下做到这一点？当标题太长时，我担心标题小部件会覆盖按钮小部件。

编码：

SizedBox(
  height: 40,
  width: MediaQuery.of(context).size.width,
  child: Row(
      children: [
        const SizedBox(width: 17),
        Text(
          'TITLE',
          style: const TextStyle(
              color: Colors.white, fontSize: 30, fontWeight: FontWeight.w500),
        ),
        Spacer(),
        Row(
            children: [
              GestureDetector(
                onTap: (){null;},
                child: SizedBox(
                  child: Icon(Icons.wallet_membership, color: Colors.white),
                ),
              ),
              const SizedBox(width: 17),
              GestureDetector(
                onTap: (){Get.toNamed('/wallet_setting');},
                child: const SizedBox(
                  child: Icon(Icons.settings, color: Colors.white),
                ),
              ),
            ]
        )

      ]
  ),
)

Answer 1

试试这个

Row(
  mainAxisAlignment: MainAxisAlignment.start,
  children: [
    Expanded(
      child: Container(
        child: Center(
          child: Text(
            'TITLE',
            style: const TextStyle(color: Colors.white, fontSize: 30, fontWeight: FontWeight.w500),
          ),
        )
      )
    ),
    Align(
      alignment: Alignment.centerRight,
      child: Row(
        children: [
          GestureDetector(
            onTap: (){null;},
            child: SizedBox(
              child: Icon(Icons.wallet_membership, color: Colors.white),
            ),
          ),
          const SizedBox(width: 17),
          GestureDetector(
            onTap: (){Get.toNamed('/wallet_setting');},
            child: const SizedBox(
              child: Icon(Icons.settings, color: Colors.white),
            ),
          ),
        ]
      )
    )
  ],
)

输出：

Answer 2

你可以在Appbar上使用centerTitle:true

appBar: AppBar(
  centerTitle: true,
  title: Text("title"),
  actions: [

你可以implements PreferredSizeWidget创建自定义Appbar。玩转颜色和其他装饰。

class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
  const MyAppBar({super.key});

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Align(
          alignment: Alignment.bottomCenter,
          child: Text("title"),
        ),
        Align(
          alignment: Alignment.bottomRight,
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              IconButton(
                //you can use callback method to get onpressed
                onPressed: () {},
                icon: Icon(Icons.settings),
              ),
              IconButton(
                onPressed: () {},
                icon: Icon(Icons.settings),
              ),
            ],
          ),
        )
      ],
    );
  }

  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight * 2);
}

并像appBar: MyAppBar(),一样使用

Answer 3

我认为你应该用中心包裹它

Answer 4

试试这个方法：

首先从你正确的小部件制作小部件：

Widget _rightIcons() {
    return Row(children: [
      GestureDetector(
        onTap: () {
          null;
        },
        child: SizedBox(
          child: Icon(Icons.wallet_membership, color: Colors.white),
        ),
      ),
      const SizedBox(width: 17),
      GestureDetector(
        onTap: () {
           Get.toNamed('/wallet_setting');
        },
        child: const SizedBox(
          child: Icon(Icons.settings, color: Colors.white),
        ),
      ),
    ]);
  }

然后像这样构建标题：

Row(
    children: [
      _rightIcons(),
      Expanded(
        child: Center(
          child: Text(
            'TITLE',
            style: const TextStyle(
                color: Colors.white,
                fontSize: 30,
                fontWeight: FontWeight.w500),
          ),
        ),
      ),
      Opacity(
        opacity: 0,
        child: _rightIcons(),
      )
    ],
  ),