flutter写一个轮播图,用CarouselSlider
时间: 2023-03-30 10:00:52 浏览: 198
好的,以下是使用 CarouselSlider 组件实现轮播图的示例代码:
```dart
import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
class MyCarousel extends StatelessWidget {
final List<String> images = [
'https://picsum.photos/id/1018/100/600',
'https://picsum.photos/id/1015/100/600',
'https://picsum.photos/id/1019/100/600',
];
@override
Widget build(BuildContext context) {
return CarouselSlider(
options: CarouselOptions(
autoPlay: true,
aspectRatio: 16/9,
enlargeCenterPage: true,
),
items: images.map((image) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 5.),
decoration: BoxDecoration(
color: Colors.grey,
),
child: Image.network(
image,
fit: BoxFit.cover,
),
);
},
);
}).toList(),
);
}
}
```
在这个示例中,我们使用了 CarouselSlider 组件来实现轮播图。首先,我们定义了一个 images 列表,其中包含了三张图片的 URL。然后,在 build 方法中,我们创建了一个 CarouselSlider 组件,并传入了一些选项,比如自动播放、宽高比、中心页面放大等。最后,我们使用 map 方法将 images 列表中的每个 URL 转换成一个 Container 组件,其中包含了一个 Image 组件,用于显示图片。注意,我们在 Builder 中创建了 Container 组件,这是因为 CarouselSlider 组件需要一个 Widget 类型的列表,而我们需要在每个 Widget 中使用 BuildContext,因此需要使用 Builder 来创建一个新的上下文。
阅读全文