Flutter中控制Expanded内部容器高度以适配内容长度的方法

我来帮你搞定这个问题～你现在的代码里，按钮区域占满整个屏幕垂直空间，核心原因是外层的Expanded组件在“搞事情”——它会强制子组件占满父容器的可用垂直空间，完全忽略内容的实际高度。要让按钮高度自适应内容，只需要做几个小修改就行：

关键修改点 #

• 移除包裹Row的外层Expanded：这个组件是导致垂直空间被拉满的罪魁祸首，去掉之后Row的高度就会由内部按钮的内容自动决定
• 保留Row内部的Expanded：这样两个按钮依然能平分屏幕的水平空间，同时文本过长时会自动换行，高度跟着内容动态调整
• 保持Column的mainAxisSize: MainAxisSize.min：让Column本身也只占用内容需要的垂直空间，不会过度拉伸

修改后的完整代码 #

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Horizontal Buttons'),
        ),
        body: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            // 移除了外层的Expanded，让Row高度由内容决定
            Row(
              children: [
                Expanded(
                  child: GestureDetector(
                    onTap: () {
                      // Action for button 1
                    },
                    child: Container(
                      padding: EdgeInsets.all(12),
                      color: Colors.blue,
                      child: Center(
                        child: Text(
                          'Button 1 with long text to test the wrapping',
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                    ),
                  ),
                ),
                SizedBox(width: 16), // Spacer between the buttons
                Expanded(
                  child: GestureDetector(
                    onTap: () {
                      // Action for button 2
                    },
                    child: Container(
                      padding: EdgeInsets.all(12),
                      color: Colors.green,
                      child: Center(
                        child: Text(
                          'Button 2 with long text to test the wrapping',
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
            // 后续如果要加其他组件，也能正常显示不会被挤压
          ],
        ),
      ),
    );
  }
}

效果说明 #

修改之后，两个按钮会平分屏幕的水平宽度，当文本过长自动换行时，按钮的高度会跟着内容自动增加，完全适配文本的长度，不会再占满整个屏幕的垂直空间啦～如果之后你想在按钮下面加其他内容，也能正常布局，不会被按钮区域覆盖。

备注：内容来源于stack exchange，提问作者Namilakonda Rahul