carousel_slider

一个轮播图组件。

功能

  • 无限滚动
  • 自定义子组件
  • 自动播放

支持的平台

  • Flutter Android
  • Flutter iOS
  • Flutter Web
  • Flutter 桌面

实时预览

https://barttpro.github.io/flutter_carousel_slider/

注意：此页面是用 flutter-web 构建的。为了获得更好的用户体验，请使用移动设备打开此链接。

安装

将 carousel_slider: ^4.0.0 添加到您的 pubspec.yaml 依赖中。然后导入它

import 'package:carousel_slider/carousel_slider.dart';

如何使用

只需创建一个 CarouselSlider 组件，并传递必需的参数

CarouselSlider(
  options: CarouselOptions(height: 400.0),
  items: [1,2,3,4,5].map((i) {
    return Builder(
      builder: (BuildContext context) {
        return Container(
          width: MediaQuery.of(context).size.width,
          margin: EdgeInsets.symmetric(horizontal: 5.0),
          decoration: BoxDecoration(
            color: Colors.amber
          ),
          child: Text('text $i', style: TextStyle(fontSize: 16.0),)
        );
      },
    );
  }).toList(),
)

参数

CarouselSlider(
   items: items,
   options: CarouselOptions(
      height: 400,
      aspectRatio: 16/9,
      viewportFraction: 0.8,
      initialPage: 0,
      enableInfiniteScroll: true,
      reverse: false,
      autoPlay: true,
      autoPlayInterval: Duration(seconds: 3),
      autoPlayAnimationDuration: Duration(milliseconds: 800),
      autoPlayCurve: Curves.fastOutSlowIn,
      enlargeCenterPage: true,
      onPageChanged: callbackFunction,
      scrollDirection: Axis.horizontal,
   )
 )

从 v2.0.0 开始，您需要将选项传递给 CarouselOptions。有关每个选项的用法，请参阅 carousel_options.dart。

如果您传递 height 参数，aspectRatio 参数将被忽略。

按需构建子组件

此方法通过在需要时构建子项来节省内存。这样，它们就不会在屏幕上显示时被构建。
它可以用于根据内容或子项索引构建不同的子项组件。

CarouselSlider.builder(
  itemCount: 15,
  itemBuilder: (BuildContext context, int itemIndex, int pageViewIndex) =>
    Container(
      child: Text(itemIndex.toString()),
    ),
)

Carousel controller

为了手动控制PageView 的位置，您可以创建自己的 CarouselController，并将其传递给 CarouselSlider。然后您可以使用 CarouselController 实例来操作位置。

class CarouselDemo extends StatelessWidget {
  CarouselController buttonCarouselController = CarouselController();

 @override
  Widget build(BuildContext context) => Column(
    children: <Widget>[
      CarouselSlider(
        items: child,
        carouselController: buttonCarouselController,
        options: CarouselOptions(
          autoPlay: false,
          enlargeCenterPage: true,
          viewportFraction: 0.9,
          aspectRatio: 2.0,
          initialPage: 2,
        ),
      ),
      RaisedButton(
        onPressed: () => buttonCarouselController.nextPage(
            duration: Duration(milliseconds: 300), curve: Curves.linear),
        child: Text('→'),
      )
    ]
  );
}

CarouselController 方法

.nextPage({Duration duration, Curve curve})

动画到下一页

.previousPage({Duration duration, Curve curve})

动画到上一页

.jumpToPage(int page)

跳转到指定页面。

.animateToPage(int page, {Duration duration, Curve curve})

动画到指定页面。

截图

基础文本轮播演示

simple

基础图片轮播演示

image

更复杂的图片轮播图演示

complicated image

全屏图片轮播图演示

fullscreen

带自定义指示器的图片轮播图演示

indicator

自定义 CarouselController 并手动控制 PageView 位置的演示

manual

垂直轮播图演示

vertical

简单的按需图片轮播图，带图片自动预加载演示

prefetch

无无限滚动演示

noloop

以上所有截图都可以在示例项目中找到。

许可证

MIT

GitHub

查看 Github