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<HomePage> {
  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<Map> swiper = (data['data']['slides'] as List).cast();
              return Column(
                children: <Widget>[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, //是否自动播放
      ),
    );
  }
}

效果图

构建

基本参数

分页指示器

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

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

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

控制按钮

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

控制器(SwiperController)

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

自动播放

项目地址

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