Flutter 学习笔记 (十五)flutter_swiper 轮播组件

Flutter 学习笔记 (一)安装及运行
Flutter 学习笔记 (二)Container组件、Text组件、图片组件
Flutter 学习笔记 (三)列表
Flutter 学习笔记 (四)Padding、Row、Column、Expanded组件
Flutter 学习笔记 (五)Stack & Align、Strack & Positioned 布局组件
Flutter 学习笔记 (六)Card、AspectRatio、CircleAvatar 组件
Flutter 学习笔记 (七)RaisedBotton、Wrap组件
Flutter 学习笔记 (八)StatefulWidget组件
Flutter 学习笔记( 九)BottomNavigationBar 组件 底部导航
Flutter 学习笔记 (十)AppBar 定义 Tab 切换
Flutter 学习笔记 (十一) Drawer 侧边栏
Flutter 学习笔记 (十二)floatingActionButton 类似闲鱼按钮
Flutter 学习笔记 (十三)TextField、Checkbox、Radio 组件
Flutter 学习笔记 (十四)时间组件
Flutter 学习笔记 (十五)flutter_swiper 轮播组件
Flutter 学习笔记 (十六)Dialog 组件
Flutter 学习笔记 (十七)网络数据请求
Flutter 学习笔记 (十八)路由跳转

基本参数

参数 默认值 描述
scrollDirection Axis.horizontal 滚动方向,设置为Axis.vertical如果需要垂直滚动
loop true 无限轮播模式开关
index 0 初始的时候下标位置
autoplay false 自动播放开关.
onIndexChanged void onIndexChanged(int index) 当用户手动拖拽或者自动播放引起下标改变的时候调用
onTap void onTap(int index) 当用户点击某个轮播的时候调用
duration 300.0 动画时间,单位是毫秒
pagination null 设置 new SwiperPagination() 展示默认分页指示器
control null 设置 new SwiperControl() 展示默认分页按钮
class _DemoState extends State<Demo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Demo'),
      ),
      body: Container(
        height: 200,
        width: double.infinity,
        child: new Swiper(
          itemBuilder: (BuildContext context, int index) {
            return new Image.network(
              "https://www.itying.com/images/flutter/${index + 1}.png",
              fit: BoxFit.cover,
            );
          },
          itemCount: 3,
          pagination: new SwiperPagination(),
          control: new SwiperControl(),
          autoplay: true,
          duration: 100,
          onTap: (index){
            print(index);
          },
        ),
      ),
    );
  }
}

Flutter 学习笔记 (十五)flutter_swiper 轮播组件_第1张图片

你可能感兴趣的:(Flutter)