Flutter三天学会之后模仿美团界面

一，上图吧

这里写图片描述

二，平静的时候适合写代码，烦躁了，打篮球，转圈圈合适，这几天下班有时间，写了美团最炫酷的三个界面。Flutter就是这么强大，但是写了三天的代码，发现再好的封装，都觉得这些代码只有自己好找，换做别人都得点进去一个个的找小部件。哈哈，不说了，今天介绍第三个我的个人界面。如下图，实现弯曲的贝塞尔曲线，如何写出这样美丽的线性渐变格调，诗一样的布局，和人你是最喜欢的。图：

这里写图片描述

首先我们看到一个弯曲的渐变由上到下的变浅的蓝色背景，中间一个头像，美丽而优雅。
这里写图片描述

就这样一个布局我们如何去改变了。我们知道在Flutter的API里面有ClipPath它有个属性->clipper我们点击去看它属于CustomClipper说明他是制定裁剪的类，和我们android原生一模一样了，Path和Canvas在手什么不能搞。至于颜色我们知道Container
就能实现哦，而且渐变方向随便搞。

至于如何裁剪，我想部分人士大学高数最后学过贝塞尔二阶和三阶曲线，如果你是android出身不知到这个，那就尴尬了，去了解下，我博客里面就有曲线而且是三阶曲线，这里二阶就搞定。看如下图分析：

这里写图片描述

我们知道画一个弧度如果贝塞尔二阶曲线需要一个控制点和一个起点，一个终点就可以画出一个弧度正如上图起点一坐标（0,height),控制点一我们可以粗略四分之一处（屏幕.width/4,height-30）,终点（屏幕.width/2,height-30(左右)），同样第二个控制点和起点一样的。最后我们通过path来连接起来裁剪出我们需要的半圆，同样向下弧度也可以了吧。
这里写图片描述

代码如下：

class ArcClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0.0, size.height);
    var firstControlPoint = Offset(size.width / 4, size.height - 30);
    var firstPoint = Offset(size.width / 2, size.height - 30);
    path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
        firstPoint.dx, firstPoint.dy);

    var secondControlPoint =
        Offset(size.width - (size.width / 4), size.height - 30);
    var secondPoint = Offset(size.width, size.height);
    path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
        secondPoint.dx, secondPoint.dy);

    path.lineTo(size.width, 0.0);
    path.close();

    return path;
  }

代码页面在项目下lib->flutter_person->PersonPager里面哦。

地址https://github.com/luhenchang/flutter_study.git

Flutter三天学会之后模仿美团界面

猜你喜欢