Flutter技术问询：如何在Row组件左侧放置Button并使Text组件与屏幕中线对齐

你的问题核心在于：当前用Expanded包裹Text时，Text的居中是相对于Button右侧到屏幕右侧的剩余空间，而不是整个屏幕的中线。因为Row里左边的Button占据了一部分宽度，剩余空间的中点自然会比屏幕中线偏右，所以Text没对齐红线。

下面给你两种简单有效的解决方法：

方法一：使用Stack布局（最直观） #

用Stack可以让Text直接基于整个屏幕居中，同时把Button固定在左侧，两者互不影响：

final double _buttonTextSize = 20.0;
final double _buttonWidth = 90.0;

@override
Widget build(BuildContext context) {
  return Container(
    color: Colors.white,
    child: Column(
      children: [
        // 替换原来的Row为Stack
        Stack(
          alignment: Alignment.center,
          children: [
            // Text直接基于整个屏幕居中
            Text(
              'Encryption',
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 30.0,
                color: MyThemeColors.textTitle(),
                fontWeight: FontWeight.w400,
              ),
            ),
            // 把Button定位在左侧
            Positioned(
              left: 8.0, // 和原来的padding对应
              child: _backButton(),
            ),
          ],
        ),
        Center(
          child: Container(color: Colors.red, height: 100, width: 5),
        )
      ],
    ),
  );
}

// _backButton方法保持不变
Button _backButton() {
  return Button(
    style: MyButtonStyles.defaultStyle(),
    child: Container(
      width: _buttonWidth,
      padding: const EdgeInsets.symmetric(vertical: 6.0, horizontal: 4.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Padding(
            padding: EdgeInsets.only(right: 4.0),
            child: Icon(FluentIcons.back, size: 22.0),
          ),
          Text(
            'Back',
            style: TextStyle(
              color: MyThemeColors.textTitle(),
              fontSize: _buttonTextSize,
            ),
          ),
        ],
      ),
    ),
    onPressed: () {
      Navigator.pop(context);
    },
  );
}

方法二：给Row添加对称的占位容器 #

在Row的右侧添加一个和Button宽度+padding一致的空容器，让左右两侧宽度对等，这样Text的居中就会刚好对齐屏幕中线：

final double _buttonTextSize = 20.0;
final double _buttonWidth = 90.0;

@override
Widget build(BuildContext context) {
  return Container(
    color: Colors.white,
    child: Column(
      children: [
        Row(
          children: [
            Container(
              padding: const EdgeInsets.all(8.0),
              child: _backButton(),
            ),
            // Expanded让Text占据中间所有空间，此时左右宽度相等，Text居中即屏幕中线
            Expanded(
              child: Text(
                'Encryption',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 30.0,
                  color: MyThemeColors.textTitle(),
                  fontWeight: FontWeight.w400,
                ),
              ),
            ),
            // 添加和Button宽度+padding一致的占位容器
            Container(
              width: _buttonWidth + 16.0, // 对应左侧8.0*2的padding
              padding: const EdgeInsets.all(8.0),
            ),
          ],
        ),
        Center(
          child: Container(color: Colors.red, height: 100, width: 5),
        )
      ],
    ),
  );
}

// _backButton方法保持不变
Button _backButton() {
  return Button(
    style: MyButtonStyles.defaultStyle(),
    child: Container(
      width: _buttonWidth,
      padding: const EdgeInsets.symmetric(vertical: 6.0, horizontal: 4.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Padding(
            padding: EdgeInsets.only(right: 4.0),
            child: Icon(FluentIcons.back, size: 22.0),
          ),
          Text(
            'Back',
            style: TextStyle(
              color: MyThemeColors.textTitle(),
              fontSize: _buttonTextSize,
            ),
          ),
        ],
      ),
    ),
    onPressed: () {
      Navigator.pop(context);
    },
  );
}

为什么原来的方法不行？ #

你之前用了MainAxisAlignment.spaceAround，但Expanded会强制Text占据Button之外的所有空间，Text的TextAlign.center是对齐这个Expanded容器的中心，而非整个屏幕的中心。屏幕中心是整个宽度的中点，左边Button占了_buttonWidth+padding的宽度，所以Expanded的中心会比屏幕中线偏右，导致Text没对齐红线。

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