Flutter跨平台移动端开发丨自定义 Banner Widget

import 'package:flutter/material.dart';
import 'dart:async';
import 'BannerBean.dart';
import 'package:meta/meta.dart';

/**
 * @des banner 部件
 * @author liyongli 20190702
 * */
class BannerWidget extends StatefulWidget{

  // banner 数据实体集合
  List<BannerBean> bannerData;

  // banner 默认高度
  double bannerHeight;

  // banner 默认展示时间（毫秒）
  int bannerDuration;

  // banner 切换速度（毫秒）
  int bannerSwitch;

  // 图片加载器
  Build bannerBuild;

  // 点击事件回调接口
  OnBannerPress bannerPress;

  BannerWidget(
      {Key key,
        @required this.bannerData,
        this.bannerHeight,
        this.bannerDuration,
        this.bannerSwitch,
        this.bannerPress,
        this.bannerBuild})
      : super(key: key);

  @override
  State<StatefulWidget> createState() => BannerWidgetState();

}

/**
 * @des banner 部件 State
 * @author liyongli 20190702
 * */
const CountMax = 0x7fffffff;
typedef void OnBannerPress(int position, BannerBean entity);
typedef Widget Build(int position, BannerBean entity);
class BannerWidgetState extends State<BannerWidget>{

  // 定时器
  Timer bannerTimer;

  // 当前 banner 页下标
  int bannerIndex = 0;

  // 控制器
  PageController bannerController;

  @override
  void initState() {
    super.initState();
    double current = (CountMax / 2) - ((CountMax / 2) % widget.bannerData.length);
    bannerController = PageController(initialPage: current.toInt());
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: widget.bannerHeight,
      color: Colors.white,
      child: Stack(
        children: <Widget>[
          viewPages(),
          viewTips()
        ],
      ),
    );
  }

  /**
   * banner 图片组件
   * */
  Widget viewPages(){
    return PageView.builder(
      itemCount: CountMax,
      controller: bannerController,
      onPageChanged: onPageChanged,
      itemBuilder: (context, index){
        return InkWell(

          onTap: (){
            if(null != widget.bannerPress){
              widget.bannerPress(bannerIndex, widget.bannerData[bannerIndex]);
            }
          },

          child: widget.bannerBuild == null ? FadeInImage.memoryNetwork( image: widget.bannerData[index % widget.bannerData.length].bannerUrl, fit: BoxFit.fitWidth) : widget.bannerBuild(index, widget.bannerData[index % widget.bannerData.length])
        );
      },
    );
  }

  /**
   * 更新坐标与图片
   * */
  void onPageChanged(index){
    bannerIndex = index % widget.bannerData.length;
    setState(() {});
  }

  /**
   * banner 小原点组件
   * */
  Widget viewTips(){

    if(widget.bannerData.length <= 1){
      return Align();
    }

    return Align(
      alignment: Alignment.bottomCenter,
      child: Container(
        height: 32.0, 
        padding: EdgeInsets.all(5.0),
        color: Colors.black,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Text(widget.bannerData[bannerIndex].bannerTitle, style: TextStyle(color: Colors.white)),
            Row(children: bannerCircle(),)
          ],
        ),
      ),
    );
  }

  /**
   * 绘制小圆点并组成集合返回
   * */
  List<Widget> bannerCircle(){
    List<Widget> circleList = [];
    for(var i = 0 ; i < widget.bannerData.length ; i++){
      circleList.add(
        Container(
          margin:  EdgeInsets.all(3.0),
          width: 5.0,
          height: 5.0,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: bannerIndex == i ? Colors.deepOrange : Colors.white,
          ),
        )
      );
    }
    return circleList;
  }

  /**
   * 启动计时器
   * */
  void start(){
    if(null != bannerTimer && bannerTimer.isActive){
      stop();
    }

    if(null == widget.bannerData || widget.bannerData.length <= 1){
      return;
    }

    bannerTimer = Timer.periodic(Duration(milliseconds: widget.bannerDuration), (bannerTimer){
      bannerController.animateToPage(bannerController.page.toInt() + 1, duration: Duration(milliseconds: widget.bannerSwitch), curve: Curves.linear);
    });
  }

  /**
   * 停止计时器
   * */
  void stop(){
    bannerTimer?.cancel();
    bannerTimer = null;
  }

  /**
   * 释放资源
   * */
  @override
  void dispose() {
    stop();
    bannerController?.dispose();
    super.dispose();
  }
}

/**
 * @des banner 组件抽象类
 * @author liyongli 20190702
 * */
abstract class BannerBeanUtils{

  // 获取 banner 地址
  get bannerUrl;

  // 获取 banner 介绍
  get bannerTitle;

}

import 'package:delongzhixuan/utils/banner/BannerWidget.dart';

/**
 * @des banner 组件实体类
 * @author liyongli 20190702
 * */
class BannerBean extends Object with BannerBeanUtils{

  String imageUrl;
  String titleStr;
  int intentType;

  BannerBean({this.imageUrl, this.titleStr, this.intentType});

  @override
  get bannerTitle => titleStr;

  @override
  get bannerUrl => imageUrl;

}

import 'dart:async';
import 'dart:core';
import 'package:delongzhixuan/utils/banner/BannerBean.dart';
import 'package:delongzhixuan/utils/banner/BannerWidget.dart';
import 'package:flutter/material.dart';

/**
 * @des 首页
 * @author liyongli
 * */
class MainHome extends StatefulWidget {

  @override
  State<StatefulWidget> createState() => new _MainHomeState();

}

/**
 * @des 首页 State
 * @author liyongli
 * */
class _MainHomeState extends State<MainHome> {

  @override
  Widget build(BuildContext context) {
    return _initWidget(context);
  }

  // 跨域访问
  GlobalKey<BannerWidgetState> globalKey = new GlobalKey<BannerWidgetState>();

  // banner 数据集合
  List<BannerBean> bannerData;

  /**
   * 初始化 widget
   * */
  Widget _initWidget(BuildContext context){
    return new Scaffold(
      body: SingleChildScrollView(
          child: Column(
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[

              // banner 部分
              Container(
                width: double.maxFinite,
                height: 260.0,
                color: Colors.white,
                child: BannerWidget( // 自定义 banner widget
                  key: globalKey, // 跨域访问目标
                  bannerData: _initBannerData(), // 数据集合
                  bannerDuration: 5000, // 展示时间
                  bannerSwitch: 500, // 切换耗时
                  bannerPress: _bannerPress, // 点击事件监听
                  bannerBuild: (position, BannerBean){ // 加载器
                    return Image.asset(BannerBean.bannerUrl, fit: BoxFit.fitWidth);
                  }
                ),
              ),
            ],
          ),
      )
    );
  }

  /**
   * 初始化 banner 数据
   * */
  List<BannerBean> _initBannerData(){

    List<BannerBean> bannerList = [
      new BannerBean(imageUrl:"images/main_banner01.png", titleStr: "main_banner01", intentType: 0),
      new BannerBean(imageUrl:"images/main_banner01.png", titleStr: "main_banner02", intentType: 0),
      new BannerBean(imageUrl:"images/main_banner01.png", titleStr: "main_banner03", intentType: 0),
    ];

    // 2 秒后启动轮播
    Timer timer;
    timer = new Timer(new Duration(seconds: 2), () {
      globalKey.currentState.start();
      timer.cancel();
      timer = null;
    });

    return bannerList;
  }
  
  /**
   * banner 点击事件监听
   * */
  void _bannerPress(int position, BannerBean entity){
    print(position);
    print(entity.titleStr + entity.imageUrl);
  }

}