前言
继【闲来无事】仿知乎广告Banner的切换功能,后再用flutter撸一遍,这样对同一功能双方的实现也可以有个对比,顺便在开工前热身一哈。
功能
Banner 中两层图片重叠,上层图片根据滚动方向和距离,进行扇形裁剪并展示。
最终使上层图片如水波状进行展开或收起。
主要代码
flutter 是没有xml布局的,全部由代码实现。
SingleChildScrollView(
controller: _scrollController,
child: Column(
children: <Widget>[
//up content
SizedBox(
height: 500,
width: screenWidth,
child: Container(
color: Colors.red,
),
),
//switch banner
Stack(
children: <Widget>[
Image.asset("assets/below.png",width: screenWidth,fit: BoxFit.fill,),
ClipPath(
clipper: _myOvalClipper,
child: Image.asset("assets/above.png",width: screenWidth,fit: BoxFit.fill,),
),
],
),
//bottom content
SizedBox(
height: 500,
width: screenWidth,
child: Container(
color: Colors.yellowAccent,
),
),
],
),
)
以上大致是布局代码,分为上中下三层,广告banner在中间位置,即:switch banner(随意取的代号)。
switch banner: 外层是stack,类似原生的FrameLayout,内部为两层图片widget,我们对第二个图片进行裁剪(也就是显示在上层的)。
实现方式
我们要达到根据滚动来实现裁剪,就需要用到ScrollController(当然,布局最外层要有一个SingleChildScrollView,类似原生的ScrollView)
@override
void initState() {
// TODO: implement initState
super.initState();
_myOvalClipper = MyOvalClipper(0);
_scrollController = ScrollController();
_scrollController.addListener((){
print("scroll offset : ${_scrollController.offset}");
if(_scrollController.offset > currentPosition){
//scroll down
scrollUp = false;
currentPosition = _scrollController.offset;
}else{
scrollUp = true;
currentPosition = _scrollController.offset;
}
if(currentPosition > 300){
ratio = 1;
}else{
ratio = currentPosition / 300;
}
setState(() {
print("ratio : $ratio");
_myOvalClipper = MyOvalClipper(ratio);
});
});
}
我们在initState 方法中(flutter的一个生命周期,一般用作初始化一些数据,具体可以百度)初始化scrollController,并添加监听函数。
_scrollController.offset 为当前滚动的位置,一般是0 到 你内容高度之和。
threshold 是一个临界值(这里设置为300),并没有具体含义,可以根据实际业务需要进行更改。
ratio 用于裁剪的系数 0-1.
setState()方法中,我们对_myOvalClipper进行刷新,已达到重新裁剪的效果(myOvalClipper 下面会讲到)。
这样我们就可以对single child scroll view 进行监听并实时得到滚动值了。
ClipPath
这个widget可以按照Path对Widget进行裁剪(它有一些封装好的如:clipOval,clipRRect等)。
ClipPath(
clipper: _myOvalClipper,
child: Image.asset("assets/above.png",width: screenWidth,fit: BoxFit.fill,),
),
child 是要裁剪的子widget,clipper 是我们的裁剪器,这里我们传入一个自定义的myOvalClipper
class MyOvalClipper extends CustomClipper<Path>{
final double ratio;
MyOvalClipper(this.ratio);
@override
Path getClip(Size size) {
// TODO: implement getClip
print("size info : ${size.width} ${size.height}");
double width = size.width;
double height = size.height;
double radius = width * ratio;
Path path = Path();
path.moveTo(0, 0);
path.lineTo(0, radius);
path.arcToPoint(Offset(radius,0),clockwise: false,radius: Radius.circular(radius));
path.close();
// path.lineTo(width, 0);
// path.lineTo(width, height);
// path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) {
// TODO: implement shouldReclip
return ratio != (oldClipper as MyOvalClipper).ratio;
}
}
shouldReclip()方法 // 是否需要重新裁剪。
具体的裁剪路径,在getClip() 进行设置,这个方法有一个参数 size, 这个是当前子widget的大小。
因为要保证扇形最终可以将整个图片显示出来,所以我们在计算radius时要使用宽度。
参考图如下:r1,r2 就是不断变化的半径
path其他的方法都比较简单,这里介绍一下
path.arcToPoint(Offset(radius,0),clockwise: false,radius: Radius.circular(radius));
第一个参数 offset: 终点
第二个参数 顺/逆时针
第三个参数 半径
path.arcToPoint 会在上一个起点开始,以offset为终点,参照半径 radius 计算出一个path。
之后我们将path.close 并返回,clipper 会按照我们的path对child widget 进行裁剪了。
DEMO地址
PS:DEMO中可能有一些无用代码,那个是我写DEMO时试验了一些其他功能的残留,个人觉得可能有用暂时保留的。
如有其他方法,请留言,大家一起交流一哈