carousel_slider 2.2.1

Flutter Android iOS web

轮播滑块控件,支持无限滚动和自定义子控件.

carousel_slider #

轮播滑块控件.

Features #

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

Supported platforms #

  • Flutter Android
  • Flutter iOS
  • 颤振网
  • 颤振桌面

Live preview #

https://serenader2014.github.io/flutter_carousel_slider/#/

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

Installation #

carousel_slider: ^2.2.1添加到pubspec.yaml依赖项. 并导入:

import 'package:carousel_slider/carousel_slider.dart';

How to use #

只需创建一个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(),
)

Params #


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参数将被忽略.

Build item widgets on demand #

此方法将在必要时通过构建项目来节省内存. 这样,如果当前不希望它们在屏幕上可见,则不会构建它们. 它可用于构建与内容相关的不同子项小部件或按项索引构建.


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

为了手动控制浏览量的位置,您可以创建自己的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 methods #

.nextPage({Duration duration, Curve curve})

动画到下一页

.previousPage({Duration duration, Curve curve})

动画到上一页

.jumpToPage(int page)

跳转到给定的页面.

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

动画到给定的页面.

Screenshot #

基本文字轮播演示:

simple

基本图片轮播演示:

image

一个更复杂的图像轮播滑块演示:

complicated image

全屏图像轮播滑块演示:

fullscreen

带有自定义指标演示的图像轮播滑块:

indicator

自定义CarouselController并手动控制综合浏览量位置演示:

manual

垂直轮播滑块演示:

vertical

简单的按需图像轮播滑块,带有图像自动预取演示:

prefetch

没有无限滚动演示:

noloop

上面的所有屏幕截图都可以在示例项目中找到.

License #

MIT

573
likes
110
pub points
99%
popularity

Publisher

serenader.me

轮播滑块控件,支持无限滚动和自定义子控件.

Repository (GitHub)
View/report issues

Documentation

API reference

License

麻省理工学院( 授权

Dependencies

flutter

More

Packages that depend on carousel_slider

by  ICOPY.SITE