Flutter UI布局问题：按钮3无法占满右侧垂直高度

问题核心是右侧按钮未拉伸至左侧两个按钮的总高度，根源在于：

• Row的crossAxisAlignment设为CrossAxisAlignment.start，子元素仅沿顶部对齐，不会自动拉伸高度
• 自定义TestButton未设置为填充父级分配的可用空间

修改方案： #

1. 调整Row的交叉轴对齐规则
   将Row的crossAxisAlignment改为CrossAxisAlignment.stretch，强制所有子元素拉伸至Row的最大高度（由左侧两个按钮的总高度决定）。

2. 让TestButton填充父级空间
   在自定义TestButton组件内部，确保可点击区域填充父级约束的空间，比如通过Container设置height: double.infinity来继承父级的高度。

修改后的完整代码： #

main.dart

import 'package:flutter/material.dart';
import 'package:test_app/button.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          child: Row(
            // 改为stretch，强制子元素拉伸高度
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Column(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  TestButton(buttonText: '1', onPressed: () {}),
                  TestButton(buttonText: '2', onPressed: () {}),
                ],
              ),
              Expanded(
                child: TestButton(buttonText: '3', onPressed: () {}),
              ),
            ],
          ),
        ),
      ),
    ),
  );
}

button.dart（自定义TestButton示例）

import 'package:flutter/material.dart';

class TestButton extends StatelessWidget {
  final String buttonText;
  final VoidCallback onPressed;

  const TestButton({super.key, required this.buttonText, required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onPressed,
      child: Container(
        width: double.infinity,
        height: double.infinity, // 填充父级分配的高度
        alignment: Alignment.center,
        margin: const EdgeInsets.all(4),
        decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.circular(8),
        ),
        child: Text(buttonText, style: const TextStyle(color: Colors.white, fontSize: 18)),
      ),
    );
  }
}

原理说明： #

• CrossAxisAlignment.stretch会让Row的所有子元素高度匹配Row的整体高度（由左侧两个按钮的总高度决定）
• Expanded确保右侧按钮占据Row剩余的宽度空间
• height: double.infinity让TestButton完全填充父级分配的高度区域

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