Flutter技术求助：修复卡片布局底部溢出及搜索异常

将元素对称成对排列，添加6个卡片后出现底部溢出问题，点击搜索按钮时也存在异常。

相关代码 #

Body组件代码 #

class Body extends StatelessWidget {
  const Body({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [ 
        GridView.builder(        
          itemCount: categoryList.length, 
          shrinkWrap: true,
          physics:  NeverScrollableScrollPhysics(),
           itemBuilder: (context, index) {       
            return CategoryCard(
             category: categoryList[index],
            );
          },
          padding: const EdgeInsets.symmetric(
            horizontal: 25,
            vertical: 30,
          ),
          gridDelegate:  SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            childAspectRatio: 0.75,
            crossAxisSpacing: 20,
            mainAxisSpacing: 24,
         ),
        ), 
      ],  
    );
  }
}

CategoryCard组件代码 #

class CategoryCard extends StatelessWidget {
  final Category category;
  const CategoryCard({
    Key? key,
    required this.category,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    
    return GestureDetector(
      onTap: () => Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => const CourseScreen(),
        ),
      ),
   
      child: Container(
        
        padding: const EdgeInsets.all(10),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(20),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(.1),
              blurRadius: 5.0,
              spreadRadius: .15,
            ),
             //BoxShadow
          ],
        ),

        child: Column(
          
          children: [     
            Align(
              alignment: Alignment.topRight,
              child: Image.asset(
                category.thumbnail,
                height: kCategoryCardImageSize,
              ),
            ),
            
            const SizedBox(
              height: 15,
              
            ),
            
            Text(category.name),
            Text(
              "${category.noOfCourses} ",
              style: Theme.of(context).textTheme.bodySmall,
            ),
          ],
        ),
      ),
    
    );
  }
}

修复方案 #

1. 解决底部溢出问题 #

底部溢出的核心原因是：Column不具备滚动能力，当GridView内容高度超过屏幕剩余空间时，就会出现溢出。提供两种修复思路：

方案一：让整个页面可滚动

用SingleChildScrollView包裹Column，使页面内容超出屏幕时可以整体滚动：

class Body extends StatelessWidget {
  const Body({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [ 
          GridView.builder(        
            itemCount: categoryList.length, 
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            itemBuilder: (context, index) {       
              return CategoryCard(
                category: categoryList[index],
              );
            },
            padding: const EdgeInsets.symmetric(
              horizontal: 25,
              vertical: 30,
            ),
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              childAspectRatio: 0.75,
              crossAxisSpacing: 20,
              mainAxisSpacing: 24,
            ),
          ), 
        ],  
      ),
    );
  }
}

方案二：让GridView独立滚动

如果需要GridView自身滚动，去掉shrinkWrap和NeverScrollableScrollPhysics，并用Expanded包裹GridView，让它占据页面剩余空间：

class Body extends StatelessWidget {
  const Body({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [ 
        Expanded(
          child: GridView.builder(        
            itemCount: categoryList.length, 
            itemBuilder: (context, index) {       
              return CategoryCard(
                category: categoryList[index],
              );
            },
            padding: const EdgeInsets.symmetric(
              horizontal: 25,
              vertical: 30,
            ),
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              childAspectRatio: 0.75,
              crossAxisSpacing: 20,
              mainAxisSpacing: 24,
            ),
          ), 
        ),
      ],  
    );
  }
}

2. 解决搜索按钮异常问题 #

搜索按钮异常通常是布局溢出导致按钮被遮挡或交互区域失效，修复溢出后，可通过以下方式优化按钮布局：

• 如果按钮需要固定在底部，用Stack将按钮与滚动区域分层，避免被滚动内容覆盖：

class Body extends StatelessWidget {
  const Body({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        SingleChildScrollView(
          child: Column(
            children: [ 
              GridView.builder(        
                itemCount: categoryList.length, 
                shrinkWrap: true,
                physics: const NeverScrollableScrollPhysics(),
                itemBuilder: (context, index) {       
                  return CategoryCard(
                    category: categoryList[index],
                  );
                },
                padding: const EdgeInsets.symmetric(
                  horizontal: 25,
                  vertical: 30,
                ),
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  childAspectRatio: 0.75,
                  crossAxisSpacing: 20,
                  mainAxisSpacing: 24,
                ),
              ), 
            ],  
          ),
        ),
        Positioned(
          bottom: 20,
          left: 25,
          right: 25,
          child: ElevatedButton(
            onPressed: () { /* 搜索逻辑 */ },
            child: const Text("搜索"),
          ),
        ),
      ],
    );
  }
}

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