Flutter轮播图效果、Flutter轮播图Demo

Flutter项目开发全套教程 专栏收录该内容
187 篇文章 61 订阅

在码农的世界里,优美的应用体验,来源于程序员对细节的处理以及自我要求的境界,年轻人也是忙忙碌碌的码农中一员,每天、每周,都会留下一些脚印,就是这些创作的内容,有一种执着,就是不知为什么,如果你迷茫,不妨来瞅瞅码农的轨迹。


本文章的效果图:
在这里插入图片描述

1 基本使用

已将轮播图封装成 BannerWidget 大家可以直接拷贝使用:

  • 自动轮播
  • 手指按下时停止轮播

基本使用代码如下:

class HomeItemDemoPage extends StatefulWidget {
  @override
  _HomeItemDemoPageState createState() => _HomeItemDemoPageState();
}

class _HomeItemDemoPageState extends State<HomeItemDemoPage> {
  
  List<String> _list = [
    "assets/images/banner1.png",
    "assets/images/banner1.png",
    "assets/images/banner1.png",
    "assets/images/banner1.png",
    "assets/images/banner1.png"
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Demo"),
      ),
      backgroundColor: Colors.white,

      ///填充布局
      body:  BannerWidget(
              imageList: _list,
            ),
    );
  }
}

2 BannerWidget 的定义

首先是定义

class BannerWidget extends StatefulWidget {
  final List<String> imageList;

  ///轮播的时间
  final Duration loopDuration;

  BannerWidget({
    //必传参数
    @required this.imageList,
    //轮播时间
    this.loopDuration = const Duration(seconds: 3),
  });

  @override
  _BannerWidgetState createState() => _BannerWidgetState();
}

class _BannerWidgetState extends State<BannerWidget> {
  //显示的轮播总页数
  int _total = 5;
  //当前显示的页数
  int _current = 1;
  //计时器
  Timer _timer;
  PageController _pageController;

  @override
  void initState() {
    super.initState();
    //轮播图个数
    _total = widget.imageList.length;
    //轮播控制器
    _pageController = new PageController(initialPage: 5000);
    //开始轮播
    startLoopFunction();
  }

  @override
  void dispose() {
    _timer.cancel();
    super.dispose();
  }
}

然后 build 中的构建如下:

  @override
  Widget build(BuildContext context) {
    //轮播 图
    return Container(
      color: Colors.red,
      height: 200,
      width: MediaQuery.of(context).size.width,
      child: GestureDetector(
        //手指按下的回调
        onTapDown: (TapDownDetails details) {
          LogUtils.e("手指按下,停止轮播");
          stopLoopFunction();
        },
        //手指抬起的回调
        onTap: () {
          LogUtils.e("手指抬起,开始轮播");
          startLoopFunction();
        },
        //手指按下后滑动移出的回调
        onTapCancel: () {
          LogUtils.e("手指移出,开始轮播");
          startLoopFunction();
        },
        child: buildStack(),
      ),
    );
  }

然后开始轮播与结束轮播的方法定义

  //定义开始轮播的方法
  void startLoopFunction() {
    //定时器
    _timer = Timer.periodic(widget.loopDuration, (timer) {
      //滑动到下一页
      _pageController.nextPage(
        curve: Curves.linear,
        duration: Duration(
          milliseconds: 200,
        ),
      );
    });
  }

  //定义停止轮播的方法
  void stopLoopFunction() {
    if (_timer.isActive) {
      _timer.cancel();
    }
  }

然后轮播图与指示器是层叠在一起的

  Stack buildStack() {
    return Stack(
      children: [
        //第一层 轮播
        Positioned.fill(
          child: PageView.builder(
            //控制器
            controller: _pageController,
            //总页数
            itemCount: 10000,
            //滑动时回调 value 当前显示的页面
            onPageChanged: (value) {
              setState(() {
                _current = value % widget.imageList.length;
              });
            },
            itemBuilder: (BuildContext context, int index) {
              String image = widget.imageList[index % widget.imageList.length];
              return Image.asset(
                image,
                fit: BoxFit.fill,
              );
            },
          ),
        ),
        //第二层 指示器
        Positioned(
          right: 14,
          bottom: 14,
          child: buildContainer(),
        ),
      ],
    );
  }

右下角对齐的指示器

  Container buildContainer() {
    return Container(
      alignment: Alignment.center,
      width: 50,
      height: 24,
      decoration: BoxDecoration(
          color: Colors.grey[200].withOpacity(0.5),
          //设置圆角
          borderRadius: BorderRadius.all(Radius.circular(12))),
      child: Text(
        "$_current/$_total",
        textAlign: TextAlign.center,
      ),
    );
  }

完毕

不局限于思维,不局限语言限制,才是编程的最高境界。

以小编的性格,肯定是要录制一套视频的,随后会上传

有兴趣 你可以关注一下 西瓜视频 — 早起的年轻人

在这里插入图片描述

  • 3
    点赞
  • 5
    评论
  • 4
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值