Flutter布局出现Right Overflow by 220 Pixel问题寻求解决

你遇到的是Flutter常见的横向布局溢出问题，核心原因是Row组件默认不会处理超出屏幕宽度的内容，而你当前的SingleChildScrollView仅包裹了外层Column，并未作用在横向排列卡片的Row上，导致多个CategoryCard总宽度超出屏幕后触发溢出错误。

原始代码 #

import 'package:flutter/material.dart';
class Category extends StatelessWidget {
  const Category({super.key});
  Widget CategoryCard(String imgUrl, String CategoryName) {
    return GestureDetector(
      onTap: () {},
      child: Container(
        margin: EdgeInsets.only(right: 16),
        child: Stack(
          children: [
            ClipRRect(borderRadius: BorderRadius.circular(6),child: Image.network(imgUrl,width: 120,height: 60,fit: BoxFit.cover,)),
            Container(alignment: Alignment.center,width: 120,height: 60,decoration: BoxDecoration(borderRadius: BorderRadius.circular(6),color: Color.fromARGB(135, 0, 0, 0),),
              child: Text(CategoryName,style: TextStyle(color: Colors.white, fontSize: 15),),
            )],),),);
  }        
 
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          Padding(padding: const EdgeInsets.all(10),child: Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [CategoryCard("img1", "Technology"),CategoryCard("img2", "Technology"),CategoryCard("img3", "Technology"),CategoryCard("img4", "Technology")],
            ),),],),);}
}

解决方案1：横向滚动（推荐，保留单行可滑动） #

将包裹卡片的Row嵌套到SingleChildScrollView中，并设置横向滚动方向：

@override
Widget build(BuildContext context) {
  return Column(
    children: [
      Padding(
        padding: const EdgeInsets.all(10),
        child: SingleChildScrollView(
          scrollDirection: Axis.horizontal, // 指定横向滚动
          child: Row(
            children: [
              CategoryCard("img1", "Technology"),
              CategoryCard("img2", "Technology"),
              CategoryCard("img3", "Technology"),
              CategoryCard("img4", "Technology")
            ],
          ),
        ),
      ),
    ],
  );
}

用户可通过横向滑动查看所有卡片，彻底解决溢出问题。

解决方案2：自动换行（超出屏幕时换行展示） #

若不想滚动，希望卡片自动适配屏幕宽度换行，用Wrap替换Row：

@override
Widget build(BuildContext context) {
  return Column(
    children: [
      Padding(
        padding: const EdgeInsets.all(10),
        child: Wrap(
          spacing: 16, // 卡片间横向间距
          children: [
            CategoryCard("img1", "Technology"),
            CategoryCard("img2", "Technology"),
            CategoryCard("img3", "Technology"),
            CategoryCard("img4", "Technology")
          ],
        ),
      ),
    ],
  );
}

Wrap会根据屏幕宽度自动调整卡片位置，超出部分自动换行。

解决方案3：自适应宽度（卡片平分屏幕空间） #

若需要卡片平分屏幕宽度，去掉卡片固定宽度，用Expanded包裹每个CategoryCard：

Widget CategoryCard(String imgUrl, String CategoryName) {
  return Expanded(
    child: GestureDetector(
      onTap: () {},
      child: Container(
        margin: EdgeInsets.only(right: 16),
        child: Stack(
          children: [
            ClipRRect(borderRadius: BorderRadius.circular(6),child: Image.network(imgUrl,height: 60,fit: BoxFit.cover,)),
            Container(alignment: Alignment.center,height: 60,decoration: BoxDecoration(borderRadius: BorderRadius.circular(6),color: Color.fromARGB(135, 0, 0, 0),),
              child: Text(CategoryName,style: TextStyle(color: Colors.white, fontSize: 15),),
            )],),),);
}

@override
Widget build(BuildContext context) {
  return Column(
    children: [
      Padding(
        padding: const EdgeInsets.all(10),
        child: Row(
          children: [
            CategoryCard("img1", "Technology"),
            CategoryCard("img2", "Technology"),
            CategoryCard("img3", "Technology"),
            CategoryCard("img4", "Technology")
          ],
        ),
      ),
    ],
  );
}

该方案适合卡片数量固定、需占满横向空间的场景。

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