如何在页面中布局8个Widget（2列）且避免溢出问题？

直接给你两个可行的解决办法，针对你要做的2列布局（每列2组图+按钮，共8个Widget）：

方案一：Row + 单列可滚动布局 #

把整体拆成左右两列，每列用SingleChildScrollView包裹Column，这样单列内容超出屏幕时可以滚动，避免溢出。

import 'package:flutter/material.dart';

class MyWidgetPage extends StatelessWidget {
  const MyWidgetPage({super.key});

  // 生成单列的图+按钮组
  Widget _buildColumnItem() {
    return Column(
      children: [
        // 第一组图+按钮
        Image.network('你的图片URL1'),
        TextButton(onPressed: () {}, child: const Text('按钮1')),
        // 第二组图+按钮
        Image.network('你的图片URL2'),
        TextButton(onPressed: () {}, child: const Text('按钮2')),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          // 左列：可滚动
          Expanded(
            child: SingleChildScrollView(
              child: _buildColumnItem(),
            ),
          ),
          // 右列：可滚动
          Expanded(
            child: SingleChildScrollView(
              child: _buildColumnItem(),
            ),
          ),
        ],
      ),
    );
  }
}

关键说明：

• 用Expanded让左右两列均分屏幕宽度
• SingleChildScrollView让单列内容超出时可以纵向滚动，彻底解决溢出
• 把重复的图+按钮组抽成方法，减少冗余代码

方案二：用GridView实现更简洁布局 #

如果你的8个Widget是同类型的，用GridView更高效，自动处理行列和滚动：

import 'package:flutter/material.dart';

class MyWidgetPage extends StatelessWidget {
  const MyWidgetPage({super.key});

  final List<Map<String, String>> items = List.generate(8, (index) {
    return {
      'imageUrl': '你的图片URL${index+1}',
      'buttonText': '按钮${index+1}'
    };
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GridView.builder(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2, // 2列布局
          childAspectRatio: 1, // 调整子项宽高比，根据你的图片尺寸设置
        ),
        itemCount: items.length,
        itemBuilder: (context, index) {
          return Column(
            children: [
              Expanded(
                child: Image.network(items[index]['imageUrl']!),
              ),
              TextButton(onPressed: () {}, child: Text(items[index]['buttonText']!)),
            ],
          );
        },
      ),
    );
  }
}

关键说明：

• crossAxisCount:2直接设置2列
• childAspectRatio控制每个子项的宽高比例，避免图片拉伸或溢出
• Expanded让图片占满子项的剩余空间，按钮固定在下方

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