flutter自定义广告Banner

本文介绍了在Flutter中创建自定义广告Banner的需求背景,指出现有开源库的不足,并详细说明了如何结合两个库的优点进行改进,实现了带有页码指示器的Banner。主要布局为Stack,包含内容视图和指示器视图,使用PageView和PageController进行页面控制。提供了源码和使用参考链接。
摘要由CSDN通过智能技术生成

Flutter 1.0 is out!

Tuesday, December 4, 2018

Banner是手机应用最常见的需求之一,https://pub.dartlang.org/flutter中搜索Banner找到两个开源库,

引入项目后,分别存在一些问题,其中banner库,没有提供页码指示器。banner_view在手动快速滑动的过程中,会导致bug。

因此决定结合两个项目的优点进行改进,实现效果如下。

主要的布局是由一个Stack包裹着banner内容视图和Indicator指示器视图

其中指示器视图直接使用的banner_view中的代码。banner内容视图部分,使用的是PageView,pageView有个地方比较坑,pageView需要通过PageController控制页面的跳转,但是通过PageController拿到的当前page页码是double类型,并且会丢失精度,需要进行四舍五入,转换成int类型之后,再作为当前页码使用。

源码:

import 'package:flutter/material.dart';

//Created by yangxiaowei at 2018/06/06
//indicator view of banner
class IndicatorWidget extends StatelessWidget {
  final Widget indicatorNormal;
  final Widget indicatorSelected;
  final double indicatorMargin;
  final int size;
  
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值