flutter 之轮播图

194 阅读1分钟

 1、在pubspec.yaml文件引入组件库

dependencies: flutter_swiper: ^1.0.6 

2、项目目录下运行flutter packages get 或者是 flutter pub get

3、基本实现

import 'package:flutter_swiper/flutter_swiper.dart’; //组件引入
SwiperController controller = new SwiperController();
Widget firstSwiperView(){
    return Container(
        padding: const EdgeInsets.fromLTRB(0, 50, 0, 5),
        width: MediaQuery.of(context).size.width,
        height: 300,
        child: Swiper(
            itemCount: 4,
            itemBuilder: (BuildContext context, int index){
                return (imageList[index]);
            },
            //分页指示器
            pagination: SwiperPagination(
                //指示器位置
                alignment: Alignment.bottomRight, 
                margin....
                padding....
                //指示器样式
                builder: DotSwiperPaginationBuilder(
                    color...
                    activeColor...
                )
            ),
            controller: controller,
            scrollDirection: Axis.horizontal,
            autoplay: true,
            onTap: (index) => print(‘点击了$index')
        )
    )
}