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

一，上图吧
我的免费视频哔站：Dart和Flutter：
https://space.bilibili.com/265453330?spm_id_from=333.788.b_765f7570696e666f.1

二，平静的时候适合写代码，烦躁了，打篮球，转圈圈合适，这几天下班有时间，写了美团最炫酷的三个界面。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> {@overridePath 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三天学会之后模仿美团界面相关推荐

模仿美团跑腿做的跑腿小程序
模仿美团跑腿做的跑腿微信小程序前段时间参考美团跑腿做了一个跑腿的微信小程序,主要是微信小程序原生开发和WEUI框架.接入了腾讯地图,一共两个小程序,分为了用户端和跑腿端.需要注意的是,该项目只是测试 ...
仅需三步学会使用低代码ThingJS与森数据DIX数据对接
森数据DIX拥有强大的数据处理能力,内置主流集成插件,分钟级集成IT运维场景和IoT管理场景数据,提升效率.针对非主流系统,支持在线JS脚本编辑,提供灵活.规范的接口,满足低代码个性化需求,轻松实现物 ...
三天学会网络爬虫之Day03
三天学会网络爬虫之Day03 第一章课程计划第二章案例扩展 2.1.定时任务. 2.1.1.Cron表达式 2.1.2.Cron测试 2.2.网页去重 2.2.1.去重方案介绍 2.2.2. S ...
三分钟学会css3中的flexbox布局
2019独角兽企业重金招聘Python工程师标准>>> 这篇文章里我们将学习CSS里flexbox布局的几个最重要的概念,通过学习flexbox布局,你会发现以往遇到的所有的关于布局 ...
Juniper 210 密码清不掉_三分钟学会如何找回mysql密码
一.在测试工作中我们肯定会写一些sq查询语句方便我们验证数据是否正确,从而判断当前软件是否存在缺陷,但是查询的过程中肯定需要我们先连接数据库,如果数据库密码忘记我们就无法完成工作,这里就教会大家如何快 ...
android studio上下滚动菜单,Android模仿美团顶部的滑动菜单实例代码
前言本文主要给大家介绍了关于Android模仿美团顶部滑动菜单的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 先来看下效果图: 实现方法这是通过 ViewPager ...
JavaScript学习笔记（三）——从简单模仿到创作
JavaScript学习笔记(三)--从简单模仿到创作目前我先列好提纲,利用每晚和周末的闲暇时间,将逐步写完 ^_^ 转载于:https://www.cnblogs.com/mixer/archiv ...
三分钟学会PS小清新调色教程-萧蕊冰
今天的PS小教程教你三分钟学会PS小清新调色教程.夏天到了,夏天的阳光很大,拍出的照片都会有一种暖色的感觉,那么我们怎么把一张照片调成日式小清新呢?今天我们就来学一个PS小清新调色教程,让你体验一下日 ...
三小时学会css（菜鸟教程精华版）【中】
三小时学会css 上期传送门 CSS 盒子模型(Box Model) CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容. 盒模型允许我们在其它元素和周围元素边 ...

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

Flutter三天学会之后模仿美团界面相关推荐

最新文章

热门文章