flutter_swiper 图片轮播

事例项目地址

flutter_swiper中文地址

以上链接中能看到 flutter_swiper 的基本用法。如有不懂的可以自行查看。
本文记录在网络课程中的 flutter_swiper 的代码及相关使用方法，本文不解释flutter_swiper 相关属性、参数或方法的意思，具体可看上面链接

1、轮播图的基本实现

import 'package:flutter/material.dart';
import '../service/service_method.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'dart:convert';

class HomePage extends StatefulWidget {
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State {
  String homePageContent = '正在获取数据';

  @override
  void initState() {
    // TODO: 后台请求数据
    getHomePageContent().then((val) {
      setState(() {
        homePageContent = val.toString();
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('百姓生活+')),
        body: FutureBuilder(
          future: getHomePageContent(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              var data = json.decode(snapshot.data.toString());
              List swiper = (data['data']['slides'] as List).cast();
              return Column(
                children: [SwiperDiy(swiperDataList: swiper)],
              );
            } else {
              return Center(
                child: Text('加载中'),
              );
            }
          },
        ) //完美解决异步请求然后再渲染，而且不用动态setState改变状态就可以渲染的很好
        );
  }
}

/**
 * 首页轮播组件
 */
class SwiperDiy extends StatelessWidget {
  final List swiperDataList;

  SwiperDiy({Key key, this.swiperDataList}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 333,
      child: Swiper(
        itemBuilder: (BuildContext context, int index) {
          return Image.network("${swiperDataList[index]['image']}");
        },
        itemCount: swiperDataList.length, // 数量
        pagination: SwiperPagination(), //点
        autoplay: true, //是否自动播放
      ),
    );
  }
}

效果图

构建

基本参数

参数	默认值	描述
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()` 展示默认分页按钮

分页指示器

分页指示器继承自 SwiperPlugin,SwiperPlugin 为 Swiper 提供额外的界面.设置为new SwiperPagination() 展示默认分页.

参数	默认值	描述
alignment	Alignment.bottomCenter	如果要将分页指示器放到其他位置，那么可以修改这个参数
margin	const EdgeInsets.all(10.0)	分页指示器与容器边框的距离
builder	SwiperPagination.dots	目前已经定义了两个默认的分页指示器样式： `SwiperPagination.dots` 、 `SwiperPagination.fraction`，都可以做进一步的自定义.

如果需要定制自己的分页指示器，那么可以这样写：

new Swiper(
    ...,
    pagination:new SwiperCustomPagination(
        builder:(BuildContext context, SwiperPluginConfig config){
            return new YourOwnPaginatipon();
        }
    )
);

控制按钮

控制按钮组件也是继承自 SwiperPlugin,设置 new SwiperControl() 展示默认控制按钮.

参数	默认值	描述
iconPrevious	Icons.arrow_back_ios	上一页的IconData
iconNext	Icons.arrow_forward_ios	下一页的IconData
color	Theme.of(context).primaryColor	控制按钮颜色
size	30.0	控制按钮的大小
padding	const EdgeInsets.all(5.0)	控制按钮与容器的距离

控制器(SwiperController)

SwiperController 用于控制 Swiper的index属性, 停止和开始自动播放. 通过 new SwiperController() 创建一个SwiperController实例，并保存，以便将来能使用。

方法	描述
void move(int index, {bool animation: true})	移动到指定下标，设置是否播放动画
void next({bool animation: true})	下一页
void previous({bool animation: true})	上一页
void startAutoplay()	开始自动播放
void stopAutoplay()	停止自动播放

自动播放

参数	默认值	描述
autoplayDely	3000	自动播放延迟毫秒数.
autoplayDisableOnInteraction	true	当用户拖拽的时候，是否停止自动播放.

项目地址

以上构建内容来自 flutter_swiper 供自己学习，查看，最新内容可看官方内容。