Flutter中如何将文本动态对齐到二维码扫描器覆盖层下方？

我已经用qr_code_scanner包实现了二维码扫描功能，想把文本固定对齐到扫描器覆盖层的下方。之前用Stack+Align的方式，设置静态的alignment: Alignment(0.0, 0.4)在自己设备上显示正常，但换其他设备时，文本会偏移到覆盖层上方，或者因为屏幕尺寸差异出现对齐偏差，需要实现任意设备都能让文本固定在覆盖层下方的动态对齐方案。

我之前的代码：

Stack(
  children: <Widget>[
    _buildQRView(context), //QR Code Scanner Overlay
    Align(
      alignment: Alignment(0.0, 0.4),
      child: Text(
        "Scan QR Code",
        style: TextStyle(color: Colors.white,),
      ),
    ),
  ],
),

我的设备显示效果：

两种动态对齐方案 #

方案一：通过LayoutBuilder动态计算对齐位置

利用LayoutBuilder获取父组件的实际尺寸，结合扫描框的比例计算文本的相对位置，适配不同屏幕：

LayoutBuilder(
  builder: (context, constraints) {
    // 扫描框尺寸取屏幕较短边的60%（可根据需求调整比例）
    final scanBoxSize = min(constraints.maxWidth, constraints.maxHeight) * 0.6;
    // 计算扫描框底部的Y坐标
    final scanBoxBottom = (constraints.maxHeight - scanBoxSize) / 2 + scanBoxSize;
    // 把文本放在扫描框下方20px处，转换为Alignment需要的相对值
    final textYOffset = (scanBoxBottom + 20 - constraints.maxHeight / 2) / (constraints.maxHeight / 2);

    return Stack(
      children: <Widget>[
        _buildQRView(context),
        Align(
          alignment: Alignment(0.0, textYOffset),
          child: Text(
            "扫描二维码",
            style: TextStyle(color: Colors.white),
          ),
        ),
      ],
    );
  },
)

方案二：自定义扫描覆盖层（更可控）

隐藏默认的扫描覆盖层，自己实现包含扫描框和文本的布局，直接把文本绑定在扫描框下方：

// 自定义覆盖层组件
Widget _buildCustomScannerOverlay(BuildContext context) {
  final screenSize = MediaQuery.of(context).size;
  // 扫描框尺寸固定为300x300，也可以用比例适配
  const scanBoxSize = 300.0;
  final scanBoxTop = (screenSize.height - scanBoxSize) / 2;

  return Stack(
    children: [
      // 自定义扫描框
      Positioned(
        left: (screenSize.width - scanBoxSize) / 2,
        top: scanBoxTop,
        child: Container(
          width: scanBoxSize,
          height: scanBoxSize,
          decoration: BoxDecoration(
            border: Border.all(color: Colors.white, width: 2),
            borderRadius: BorderRadius.circular(10),
          ),
        ),
      ),
      // 文本固定在扫描框下方20px处
      Positioned(
        left: 0,
        right: 0,
        top: scanBoxTop + scanBoxSize + 20,
        child: const Center(
          child: Text(
            "扫描二维码",
            style: TextStyle(color: Colors.white, fontSize: 16),
          ),
        ),
      ),
    ],
  );
}

// 使用自定义覆盖层的扫描组件
Stack(
  children: [
    QRView(
      key: qrKey, // 你的QRView key
      onQRViewCreated: _onQRViewCreated, // 你的回调方法
      // 隐藏默认覆盖层
      overlay: const QrScannerOverlayShape(borderColor: Colors.transparent),
    ),
    _buildCustomScannerOverlay(context),
  ],
)

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