Flutter布局问题：如何在同一行居中Widget并靠左放置另一个？

需求要点 #

• 第一个Widget以父容器为基准完全居中，不受右侧Widget影响
• 第二个Widget固定在右侧
• 居中Widget内容过长时自动换行，不会与右侧Widget重叠（Stack直接叠加的方案会导致重叠，因此不可用）

试过的无效方案 #

1. Row+MainAxisAlignment.spaceBetween：居中Widget实际是左对齐，并非真正居中
2. Expanded包裹Center的Row：居中Widget的宽度被压缩为父容器减去右侧Widget的宽度，视觉上不居中
3. Stack直接叠加：内容过长时与右侧Widget重叠，不符合要求

当前临时方案（弊端明显） #

把右侧Widget存为变量，在Row左右两侧都放这个Widget，用spaceBetween对齐，再把左侧的设为透明。这种方法不仅繁琐，还会占用多余的空间。

可行解决方案 #

方案1：动态计算宽度的Stack布局

通过LayoutBuilder获取父容器宽度，结合IntrinsicWidth拿到右侧Widget的宽度，限制居中Widget的最大宽度，确保内容过长时自动换行：

double _rightWidgetWidth = 0;

return Scaffold(
  body: Padding(
    padding: const EdgeInsets.all(38.0),
    child: Column(
      children: [
        LayoutBuilder(
          builder: (context, constraints) {
            return Stack(
              alignment: Alignment.center,
              children: [
                ConstrainedBox(
                  constraints: BoxConstraints(
                    maxWidth: constraints.maxWidth - _rightWidgetWidth,
                  ),
                  child: Text(
                    "Center me, I should wrap because I am too loooooooooooooong and need to wrap instead of overlapping the right widget",
                    textAlign: TextAlign.center,
                  ),
                ),
                Positioned(
                  right: 0,
                  child: IntrinsicWidth(
                    child: Builder(
                      builder: (context) {
                        _rightWidgetWidth = context.size!.width;
                        return Text("I am right");
                      },
                    ),
                  ),
                ),
              ],
            );
          },
        ),
      ],
    ),
  ),
);

方案2：预留给右侧空间的简洁版

如果右侧Widget宽度固定，可以直接给居中Widget添加右侧padding，避免重叠：

return Scaffold(
  body: Padding(
    padding: const EdgeInsets.all(38.0),
    child: Column(
      children: [
        Stack(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Padding(
                  padding: const EdgeInsets.only(right: 60), // 右侧Widget的宽度
                  child: Text(
                    "Center me, I should wrap because I am too loooooooooooooong and need to wrap instead of overlapping the right widget",
                    textAlign: TextAlign.center,
                  ),
                ),
              ],
            ),
            const Positioned(
              right: 0,
              child: Text("I am right"),
            ),
          ],
        ),
      ],
    ),
  ),
);

方案3：封装可复用组件

如果需要多次使用这种布局，可以封装成自定义组件，动态计算右侧Widget宽度：

class CenterWithRightWidget extends StatelessWidget {
  final Widget centerChild;
  final Widget rightChild;

  const CenterWithRightWidget({
    super.key,
    required this.centerChild,
    required this.rightChild,
  });

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        return Stack(
          alignment: Alignment.center,
          children: [
            FutureBuilder<double>(
              future: _getRightWidgetWidth(context),
              initialData: 0,
              builder: (context, snapshot) {
                return ConstrainedBox(
                  constraints: BoxConstraints(
                    maxWidth: constraints.maxWidth - (snapshot.data ?? 0),
                  ),
                  child: centerChild,
                );
              },
            ),
            Positioned(
              right: 0,
              child: rightChild,
            ),
          ],
        );
      },
    );
  }

  Future<double> _getRightWidgetWidth(BuildContext context) async {
    final renderBox = rightChild.createRenderObject(context);
    renderBox.layout(const BoxConstraints());
    return renderBox.size.width;
  }
}

// 使用示例
CenterWithRightWidget(
  centerChild: Text(
    "Center me, I should wrap because I am too loooooooooooooong and need to wrap instead of overlapping the right widget",
    textAlign: TextAlign.center,
  ),
  rightChild: const Text("I am right"),
)

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