Flutter 小技巧 - 调整 CarouselSlider 轮播图高度

轮播图封装:

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

class ImageCarouselWidget extends StatefulWidget {
  final List<String> images;
  const ImageCarouselWidget({super.key, required this.images});

  @override
  _ImageCarouselState createState() => _ImageCarouselState();
}

class _ImageCarouselState extends State<ImageCarouselWidget> {
  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      options: CarouselOptions(
        height: double.infinity, // 高度由外部容器决定
        viewportFraction: 1, // 可视窗口百分比
        enlargeCenterPage: false, // 移除放大效果
      ),
      items: widget.images.map((imagePath) {
        return Builder(
          builder: (BuildContext context) {
            return Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16.0), // 左右间距
              child: ClipRRect(
                borderRadius: BorderRadius.circular(16.0), // 设置圆角
                child: Image.asset(
                  imagePath,
                  fit: BoxFit.cover, // 保持图片比例
                  width: double.infinity, // 填满宽度
                  height: double.infinity, // 填满宽度
                ),
              ),
            );
          },
        );
      }).toList(),
    );
  }
}

使用：

  Widget userWidget() {
    return const Padding(
            padding: const EdgeInsets.all(16.0),
      child: SizedBox(
        height: 180, // 设置固定高度
        child: ImageCarouselWidget(images: ['path1', 'path2', 'path3']),
      ),
    );
  }

关键点：使用 SizedBox 包装，并设置 SizedBox 高度。