Flutter：在多组件Row中固定居中指定Text组件

问题说明 #

需要让Text("MJ")固定在页面水平居中位置，即使添加右侧的认证图标后也不会偏移。当前代码中Row将Text和Icon作为整体居中，导致MJ本身不在页面正中间；期望效果是MJ处于页面中心，图标紧跟在MJ右侧。

解决方案：动态计算文本宽度的精准布局 #

这种方式能确保Text始终居中，图标仅作为Text的右侧附加元素，不影响Text的居中位置：

body: SingleChildScrollView(
  child: Column(children: [
    Row(mainAxisAlignment: MainAxisAlignment.center, children: [
      Container(height: 60, width: 200, child: CircleAvatar())
    ]),
    Padding(
      padding: EdgeInsets.only(top: 10),
      child: Center(
        child: IntrinsicWidth(
          child: Stack(
            alignment: Alignment.center,
            children: [
              // 固定居中的文本
              Text("MJ"),
              // 图标附加在文本右侧，动态计算偏移量
              Positioned(
                left: (TextPainter(
                  text: TextSpan(text: "MJ", style: DefaultTextStyle.of(context).style),
                  textDirection: TextDirection.ltr,
                )..layout()).width + 4, // 计算文本宽度后加间距
                child: Icon(Icons.verified),
              ),
            ],
          ),
        ),
      ),
    ),
  ]),
)

简化方案（固定文本场景） #

如果文本内容固定，也可以手动设置图标偏移量，实现更快的布局：

body: SingleChildScrollView(
  child: Column(children: [
    Row(mainAxisAlignment: MainAxisAlignment.center, children: [
      Container(height: 60, width: 200, child: CircleAvatar())
    ]),
    Padding(
      padding: EdgeInsets.only(top: 10),
      child: SizedBox(
        width: double.infinity,
        child: Stack(
          children: [
            Center(child: Text("MJ")),
            Center(
              child: Padding(
                padding: EdgeInsets.only(left: 26), // 根据文本宽度手动调整偏移
                child: Icon(Icons.verified, size: 16),
              ),
            ),
          ],
        ),
      ),
    ),
  ]),
)

内容的提问来源于stack exchange，提问作者Binghaleb