Flutter CarouselSlider替换Stack为Column后底部RenderFlex溢出报错解决

出现RenderFlex底部溢出是3处代码写法错误共同导致的：

• 在Column组件内直接使用Positioned组件：Positioned是Stack布局的专属子组件，只能作为Stack的直接子节点使用，放在Column中会直接触发布局约束异常
• 网络图片未设置高度约束：Image.network默认会按照资源原始分辨率渲染，CarouselSlider的视口可用高度有限，图片原始高度加上文本区域高度总和超过轮播项的可用高度，直接撑爆布局
• Expanded使用位置错误：Expanded仅能作为Row、Column、Flex这类弹性布局的直接子组件生效，包裹外层Container无法起到自适应高度的作用

要实现图片下方放置文本区域的轮播效果，按以下逻辑调整即可：

• 删除Column中无效的Positioned组件，文本容器直接作为Column的第二个子项
• 用Expanded包裹图片组件，配合fit: BoxFit.cover让图片自动占满轮播项除文本区域外的剩余高度，不会出现高度溢出
• 移除外层无宽高约束的冗余SizedBox，可通过CarouselOptions的aspectRatio参数自定义轮播组件的整体宽高比例
• 参考效果如下：轮播组件参考效果图

import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';

List<String> imgList = [
  'https://images.unsplash.com/photo-1520342868574-5fa3804e551c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6ff92caffcdd63681a35134a6770ed3b&auto=format&fit=crop&w=1951&q=80',
  'https://images.unsplash.com/photo-1522205408450-add114ad53fe?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=368f45b0888aeb0b7b08e3a1084d3ede&auto=format&fit=crop&w=1950&q=80',
  'https://images.unsplash.com/photo-1519125323398-675f0ddb6308?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=94a1e718d89ca60a6337a6008341ca50&auto=format&fit=crop&w=1950&q=80',
  'https://images.unsplash.com/photo-1523205771623-e0faa4d2813d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=89719a0d55dd05e2deae4120227e6efc&auto=format&fit=crop&w=1953&q=80',
  'https://images.unsplash.com/photo-1508704019882-f9cf40e475b4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8c6e5e3aba713b17aa1fe71ab4f0ae5b&auto=format&fit=crop&w=1352&q=80',
  'https://images.unsplash.com/photo-1519985176271-adb1088fa94c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a0c8d632e977f94e5d312d9893258f59&auto=format&fit=crop&w=1355&q=80'
];

class RecommendShip extends StatelessWidget {
  const RecommendShip({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final List<Widget> imageSliders = imgList
        .map(
          (item) => Container(
            margin: const EdgeInsets.all(5.0),
            child: ClipRRect(
              borderRadius: const BorderRadius.all(Radius.circular(10.0)),
              child: Column(
                children: [
                  Expanded(
                    child: Image.network(
                      item,
                      fit: BoxFit.cover,
                      width: double.infinity,
                    ),
                  ),
                  Container(
                    width: double.infinity,
                    decoration: const BoxDecoration(
                      gradient: LinearGradient(
                        colors: [
                          Color.fromARGB(200, 0, 0, 0),
                          Color.fromARGB(0, 0, 0, 0)
                        ],
                        begin: Alignment.bottomCenter,
                        end: Alignment.topCenter,
                      ),
                    ),
                    padding: const EdgeInsets.symmetric(
                        vertical: 10.0, horizontal: 20.0),
                    child: Text(
                      'No. ${imgList.indexOf(item)} image',
                      style: const TextStyle(
                        color: Colors.white,
                        fontSize: 20.0,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        )
        .toList();

    return CarouselSlider(
      options: CarouselOptions(
        autoPlay: false,
        enlargeCenterPage: true,
        // 可自行调整宽高比，数值越小轮播组件高度越高
        aspectRatio: 16/9,
      ),
      items: imageSliders,
    );
  }
}

补充说明：如果需要实现参考图中文本浮在图片底部的叠层效果，不要使用Column布局，直接用Stack作为轮播项根布局，文本区域用Positioned定位在底部即可，该写法同样不会出现布局溢出问题。

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