Flutter双按钮自适应布局：两端对齐/垂直居中堆叠

不用Wrap的话，用LayoutBuilder结合Row/Column就能完美实现这个需求：通过判断可用空间是否能容纳两个按钮的总宽度，自动切换布局方式。

完整代码示例 #

class AdaptiveButtonLayout extends StatelessWidget {
  final Widget leftButton;
  final Widget rightButton;

  const AdaptiveButtonLayout({
    super.key,
    required this.leftButton,
    required this.rightButton,
  });

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        // 计算两个按钮的固有宽度
        return IntrinsicWidth(
          child: Builder(
            builder: (context) {
              final leftWidth = context.size?.width ?? 0;
              return IntrinsicWidth(
                child: Builder(
                  builder: (context) {
                    final rightWidth = context.size?.width ?? 0;
                    final totalButtonWidth = leftWidth + rightWidth;

                    // 判断可用宽度是否足够容纳两个按钮并排（加16是预留的最小间距）
                    if (constraints.maxWidth >= totalButtonWidth + 16) {
                      // 水平空间充足：左右分布，中间用Spacer拉满间距
                      return Row(
                        children: [
                          leftButton,
                          const Spacer(),
                          rightButton,
                        ],
                      );
                    } else {
                      // 空间不足：垂直堆叠，居中对齐
                      return Column(
                        mainAxisSize: MainAxisSize.min,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          leftButton,
                          const SizedBox(height: 12),
                          rightButton,
                        ],
                      );
                    }
                  },
                ),
              );
            },
          ),
        );
      },
    );
  }
}

// 使用示例
AdaptiveButtonLayout(
  leftButton: ElevatedButton(
    onPressed: () {},
    child: const Text('左侧按钮'),
  ),
  rightButton: OutlinedButton(
    onPressed: () {},
    child: const Text('右侧按钮'),
  ),
)

核心逻辑说明 #

1. LayoutBuilder：获取父容器的可用宽度约束，作为布局切换的判断依据
2. IntrinsicWidth：精准计算两个按钮的固有宽度，确保判断空间是否足够的准确性
3. 空间充足时用Row+Spacer实现左右两端对齐，最大化水平间距；空间不足时切换为Column，垂直居中堆叠，按钮间添加固定间距避免拥挤

为什么不用Wrap？ #

Wrap默认按组件顺序排列，空间不足时仅会将后续组件换行，但无法直接实现换行后垂直居中对齐，也很难让两个按钮在空间充足时自动拉满水平间距。用LayoutBuilder的方式更直接可控，能精准匹配你的布局需求。

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