【Flutter】三十九、Flutter常用组件——轮播组件flutter_swiper

最新推荐文章于 2024-08-15 09:22:36 发布

MAXLZ

最新推荐文章于 2024-08-15 09:22:36 发布

阅读量1.2k

点赞数

分类专栏：【Flutter】学习记录文章标签： Flutter Swiper 轮播

本文链接：https://blog.csdn.net/qq_33635385/article/details/102909687

版权

【Flutter】学习记录专栏收录该内容

46 篇文章 33 订阅

订阅专栏

一、安装flutter_swiper

flutter_swiper: ^1.1.6
flutter pub get

二、使用

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

class SwiperRoute extends StatefulWidget{
  @override
  _SwiperRouteState createState() {
    // TODO: implement createState
    return _SwiperRouteState();
  }
}

class _SwiperRouteState extends State<SwiperRoute>{
  List<ImageProvider> list = [
    AssetImage('assets/images/lake.jpg'),
    AssetImage('assets/images/img1.jpg'),
    AssetImage('assets/images/img2.jpg')
  ];
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('SwiperDemo'),
      ),
      body: Container(
        width: double.infinity,
        height: 250,
        child: Swiper(
          autoplay: true,
          itemBuilder: (BuildContext context,int index){
            return Stack(
              children: <Widget>[
                Container(
                  margin: EdgeInsets.all(10),
                  decoration: BoxDecoration(
                      boxShadow: [
                        BoxShadow(offset: Offset(1, 1), color: Colors.black12, spreadRadius: 3.0, blurRadius: 7.0),
                        BoxShadow(offset: Offset(-1, -1), color: Colors.black12, spreadRadius: 3.0, blurRadius: 7.0),
                        BoxShadow(offset: Offset(-1, 1), color: Colors.black12, spreadRadius: 3.0, blurRadius: 7.0),
                        BoxShadow(offset: Offset(1, -1), color: Colors.black12, spreadRadius: 3.0, blurRadius: 7.0),
                      ],
                      borderRadius: BorderRadius.circular(15.0),
                      image: DecorationImage(image: list[index],fit: BoxFit.cover)
                  ),
                ),
                Align(
                  alignment: Alignment.center,
                  child: Text('$index', style: TextStyle(color: Colors.white, fontSize: 95.0)),
                )
              ],
            );
          },
          itemCount: 3,
          fade: 0.0,
          scale: 0.0,
          curve: Curves.easeInOut,
          duration: 600,
          autoplayDelay: 5000,
          pagination: SwiperPagination(
            margin: EdgeInsets.symmetric(horizontal: 20, vertical: 30)
          ),
        ),
      )
    );
  }
}

效果:
在这里插入图片描述

三、Swiper属性说明

Swiper({
    this.itemBuilder,
    this.indicatorLayout: PageIndicatorLayout.NONE,

    this.transformer,
    @required this.itemCount, // 轮播数量
    this.autoplay: false, // 自动播放
    this.layout: SwiperLayout.DEFAULT,
    this.autoplayDelay: kDefaultAutoplayDelayMs, // 自动播放延迟时长，单位ms
    this.autoplayDisableOnInteraction: true, // 交互时是否禁用自动播放
    this.duration: kDefaultAutoplayTransactionDuration, // 动画时间，单位ms
    this.onIndexChanged, // 下标改变的回调
    this.index, // 初始下标
    this.onTap, // 点击轮播的回调
    this.control, // 左右切换指示器
    this.loop: true, // 无缝轮播模式开关
    this.curve: Curves.ease, // 动画曲线
    this.scrollDirection: Axis.horizontal, // 滚动方向
    this.pagination, // 分页指示器
    this.plugins,
    this.physics,
    Key key,
    this.controller,
    this.customLayoutOption,

    this.containerHeight,
    this.containerWidth,
    this.viewportFraction: 1.0, // 轮播区大小
    this.itemHeight,
    this.itemWidth,
    this.outer: false, // 分页指示器是否放在轮播区域外
    this.scale, // 缩放
    this.fade, 
  })