轮播图封装:
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 高度。
