11.2顶部留白 ios_安卓8.0图标留白 - CSDN
精华内容
参与话题
  • iphonex适配的n种方案

    2020-08-28 00:02:04
    一、方案 (原理见第二部分) ... /* 兼容 iOS < 11.2 */ padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */ 2、多媒体查询 /* iPhone X 和 iPhone XS */ @media only screen

    一、方案

    (原理见第二部分)
    1、简单粗暴的方法,不需要知道是不是iphonex,有safe area就空出来。

    
    padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */ 
    padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
    

    2、多媒体查询

    /* iPhone X 和 iPhone XS */
    
    @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
      
    }
    
    /* iPhone XR */
    
    @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
      
    }
    
    /* iPhone XS Max */
    
    @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
      
    }
    

    3、js判断宽度逻辑与多媒体查询相似,判定长宽即可。适用与针对iphonex做功能适配的场景。

    function isIPhoneX(fn){
        var u = navigator.userAgent;
        var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        if (isIOS) {    	
            if (screen.height == 812 && screen.width == 375){
        	    //是iphoneX
            }else{
            	//不是iphoneX
            } 
        }
    }
    

    二、原理

    iphonex的适配问题:因为iphonex的全名屏幕及刘海的设计,所以为了页面内容不被传感器及外壳挡住,通常来说,页面会默认留出一个safe area,页面也只在这部分显示。因此会在两边留白,通常来讲两边直接留白并不好看,最好可以用背景色进行填充。但是更好的办法就是先设置成让页面完全填充设备,然后在根据页面设计来填充danger area。让页面进行完全填充的方案就是在mate将viewport-fit设置成cover,这时候页面会进行完全填充,如下:
    在这里插入图片描述

    对需要空出danger area的部分加个padding就行了。现在问题就变成了,我怎么知道这个手机是iphonex和我到底留多少padding。为了让开发者知道这个具体的danger area,在把view-fit设置成cover后会多出safe-area-inset-的属性,来告知safe area和可视窗口viewport顶部,右边,左边,底部的间距。所以可以用support来判定手机是否支持,支持的话就说明是带小黑条需要适配的机型。而padding的高度可以用constant(safe-area-inset-)来获取小黑条的高度。然后这里有个坑:constant() 在 iOS11.2 之后就不能使用的,而在 iOS11.2用的是另一种计算方式env,也就是说为了兼容性,这两个都要写上。
    关于方案怎么选择,则完全取决于业务场景。如果说只是单纯的需要把页面内容避开安全域,那就用padding的方式加safe area的距离就行。如果需要对iphonex和其他机型做不同的样式处理可以用多媒体查询判定是不是iphonex。如果是判断端则用js判断长宽,xs、xr同理。

    后记:之前一般都先讲原理在说结论,但是后来我发现其实有时候大家都是业务场景去找一个方案,有空才回去看原理,因此在问题探究这个模块我会尝试采用先结论后方案的方式。

    展开全文
  • 最近开发移动端较多,整理了一下最近遇到的一些兼容问题,嘿嘿(主要想试一下俺新买的键盘~) 1.1px在移动端的解决方案 最开始当然从移动端的兼容性适配开始了,关于的详细解释,在我上一篇博客中已经大概讲了一下...

    最近开发移动端较多,整理了一下最近遇到的一些兼容问题,嘿嘿(主要想试一下俺新买的键盘~)

    1.1px在移动端的解决方案

    最开始当然从移动端的兼容性适配开始了,关于的详细解释,在我上一篇博客中已经大概讲了一下,1px在移动端的解决方案,问题产生的原因就是在于不同dpr的设备上,1px的css样式像素会产生不同的效果。

    • 对于老项目,最好的解决方案可以使用css3中的transform结合伪类::after/::before来进行缩放解决;
    • 对于新项目,可以使用viewport+rem,可以全局性的设置缩放比例,并设定全局根元素的rem,
      头部的原始状态设为:
    <meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    

    js动态修改的部分:

    var viewport = document.querySelector("meta[name=viewport]")
    if (window.devicePixelRatio == 1) {
        viewport.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no')
    } 
    if (window.devicePixelRatio == 2) {
        viewport.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no')
    } 
    if (window.devicePixelRatio == 3) {
        viewport.setAttribute('content', 'width=device-width, initial-scale=0.333333333, maximum-scale=0.333333333, minimum-scale=0.333333333, user-scalable=no')
    } 
    var docEl = document.documentElement;
    var fontsize = 10 * (docEl.clientWidth / 320) + 'px';
    docEl.style.fontSize = fontsize;
    

    详情可以移步这里

    2.当字号小于12px时,安卓中文字无法垂直居中

    3.移动端实现,键盘点击,用户唤起搜索功能(即enter键?)

    <form action="javascript:void(0)">
    <input
          name="search"
          v-model="searchValue"
          placeholder="请输入公司简称或产品名称"
          ref="searchInput"
          @keyup.13="searchAllData()" />
    </form>
    

    Tips:

    • 不管是安卓还是苹果手机,搜索按键的keycode都是13,这里是vue项目,可以使用按键修饰符。
    • 用type="search"来统一安卓和苹果机的搜索按键。
    • 必须在input标签外面套上form表单,并设置 action=“javascript:void 0”,action属性很关键,才能实现搜索功能,不能省略。
    • 若想添加自动聚焦功能,可以先获取当前input这个dom元素,再添加focus()方法;
    this.$nextTick(() => {
    this.$refs.searchInput.focus()
     })
    

    4.当使用position定位时,css3中transform的等级高于position定位

    里面涉及到对于层叠上下文的知识理解,具体可以参考鑫旭大大的博客

    5.微信内置浏览器在ios中返回上一级不会刷新页面,但是安卓会重新刷新页面

    (1)针对这种问题,当时的产品的方案是要保留缓存,返回上一级页面时,会记住用户的筛选记录,对于安卓端的刷新页面的现象,当时的解决方案是将用户的筛选条件记录在sessionStorage里面,当返回上一级页面时,从缓存中读取记录,并重新请求。在监听用户跳转页面的行为中,存在两种情况:

    • 一种是vue内置的vue-router路由跳转
    • 一种是js里面使用window.lcaotion.href跳转

    针对这两种跳转方式,在使用监听事件onbeforeunload时,引出了兼容性问题8
    (2)针对苹果不想留住缓存的情况,渴望刷新,新增解决方案:
    监听页面的pageshow事件

     if(isIOS()){
    	  window.addEventListener('pageshow', function (event) {
    	        if (event.persisted || window.performance &&
    	                window.performance.navigation.type == 2)
    	        {
    	            location.reload();
    	        }
    	    },false);
        }
    

    6.微信内置浏览器深层嵌套一层webview,ios导致偶尔会出现滑动到底部,下滑困难,内部无法滑动,需要倒退1px才可以

    这个问题同理滑动到顶部,会出现上滑困难,内部无法滑动,需要倒退1px才可以。
    解决方案在于这个1px上面,废话不多说,上代码!

    /**
     * 判断是否为ios
     */
    export function isIOS () {
      return !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
    }
    /**
     * 微信浏览器判断
     */
    export function isWXBrowser () {
      var ua = window.navigator.userAgent.toLowerCase()
      if (ua.match(/MicroMessenger/i) == 'micromessenger') return true
      return false
    }
    
    // 重点在这里哦,微信环境ios下触底或者下拉回弹1px
    /**
     *
     * 微信浏览器 IOS 容器内滚动到底或到顶,再次快速滑动会出现无法滑动的bug
     * @export
     * @param {obj} e 容器的节点
     */
    export function fixIosScroll (e) {
      if (!isIOS && !isWXBrowser) return
      const scrollHeight = e.scrollHeight
      const scrollTop = e.scrollTop
      const clientHeight = e.clientHeight
      // 滚动条在顶部,回退1px
      if (scrollTop === 0) {
        e.scrollTop = 1
        return
      }
      // 滚动条触底,向上1px
      if (scrollHeight - scrollTop === clientHeight) {
        e.scrollTop = scrollTop - 1
      }
    }
    

    7.微信分享功能,偶现初始化失败,默认会直接分享当前window.location页面,使用vue中的路由router跳转无法获取当前页面。

    针对微信jssdk的初始化失败的情况,vue项目中无法默认分享当前页面,解决方案是,跳转当前需要分享的页面时不使用vue-router路由跳转,而是window.location,href跳转,改变window.location的值,实现初始化失败时默认分享当前页面

    8.微信浏览器移动端不支持window.open打开新的窗口,不支持onbeforeunload页面卸载事件

    在监听页面地址变化的时候,我开始使用的是onbeforeunload事件,用来针对vue-router跳转和window.location.href跳转两种情况都很有效果。是在使用谷歌浏览器内置的移动端模拟器上面是ok,ok,ok……的,But……(黑脸表情。。。)当我在手机上面真机调试的时候,竟然不起作用,没有效果!!!!

    所以,我不得不放弃了这个onbeforeunload,??
    最后,分成了两种来判断,vue-router跳转使用路由内置的钩子函数beforeRouteLeave来添加(这个监听不到window.location.href跳转哦);
    window.location.href则在添加跳转的事件里面捕获;


    另外,提一嘴,H5新增的历史记录监听事件,通用性感觉不高:

    • window.onpopstate:当调用history.go()、history.back()、history.forward()浏览器的几个前进后退时触发;pushState()\replaceState()方法不触发
    • window.onhashchange:当前 URL 的锚部分(以 ‘#’ 号为开始) hash值发生改变时触发

    另外补充一点:

    使用onpagehide可以检测浏览器页面的关闭事件触发,以及监听页面window.location.href的跳转事件,但是对于vue的单页面router跳转是捕捉不到的,可以使用destoryed或者beforeRouteLeave路由的钩子函数来监听

    9.当使用input输入框输入时,ios出现软键盘后,页面会被顶上去,收起键盘,页面下方留白

    10.微信H5中ios有页面回弹的效果,安卓没有

    11.在移动端浏览器中(至少在微信环境中),打开http://XXXX.pdf预览pdf文件,ios可以直接预览,安卓必须先跳转浏览器下载后才能看

    解决办法:引入pdfh5.js插件,跳转另外一个html网站的链接页面,在这个页面中创建一个dom,支持使用canvas和svg两种渲染模式,进行预览

    npm install --save pdfh5
    
    <template>
      <div id="app">
    	<div id="demo"></div>
      </div>
    </template>
    <script>
      import Pdfh5 from "pdfh5";
      export default {
        name: 'App',
    	data() {
    	  return {
    	    pdfh5: null
    	  };
    	},
    	mounted() {
    		//实例化
    	  this.pdfh5 = new Pdfh5("#demo", {
    		pdfurl: "../../static/test.pdf"
    	  });
    	  //监听完成事件
    	  this.pdfh5.on("complete", function (status, msg, time) {
    		console.log("状态:" + status + ",信息:" + msg + ",耗时:" + time + "毫秒,总页数:" + this.totalNum)
    	  })
    	}
      }
    </script>
    
    
    //*********************************或者js引入****************************
    //1.引入css
    <link rel="stylesheet" href="css/pdfh5.css" />
    //2.创建div
    <div id="demo"></div>
    //3.依次引入js
    <script src="js/pdf.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/pdf.worker.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/pdfh5.js" type="text/javascript" charset="utf-8"></script>
    //4.实例化
    var pdfh5 = new Pdfh5('#demo', {
      pdfurl: "./default.pdf"
    });
    

    12.ios微信首次打开h5页面,底部是没有历史记录导航的,如果这时候直接跳转外链,再返回,这时首页底部就会增加历史记录导航,而且出现的问题是》》》》遮挡首页底部部分内容(保保商城首页)

    解决办法:
    手动增加一个空的历史记录

    /**
     * 判断是否为ios
     */
    export function isIOS () {
      return !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
    }
    /**
     * 微信浏览器判断
     */
    export function isWXBrowser () {
      var ua = window.navigator.userAgent.toLowerCase()
      if (ua.match(/MicroMessenger/i) == 'micromessenger') return true
      return false
    }
    
     if (isIOS() && isWXBrowser()) {
          window.history.pushState({}, '', '')
        }
    

    13.苹果iOS11,iphoneX以上存在安全区域兼容适配

    事故源自于一次App中内嵌H5网页,h5页面底部出现一条灰色的空白区域,当底部弹出选择框时,被这个灰条挡住下面的一部分,考虑是iphoneX机型,故可认定为安全区域的阻挡,同样的,在iphone6机型中就无此问题。
    解决办法:
    在html文件中设置头部的meta,viewport-fit设置为cover

    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    

    在被遮挡的弹出层上设置

    padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
    padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
    

    因为项目是老项目,设计到的页面比较多,故没有全局的body去设置,哪个页面出现问题就用这个办法去解决。但是移动端新的项目在做开始的适配的时候,建议全局设置safe-area-inset-bottom

    14.ios在微信浏览器中的h5网页有页面的回弹效果,若页面中存在轮播的swiper组件,滑动过程中会出现页面抖动

    话说这个问题我找了好久,开始还以为是偶现问题,后来一顿操作排除发现不太对,这尼玛只要你滑到底部,手暂停一下不松手,页面的抖动就出现了,而这个抖动和轮播下一张图片是一起出现,故定位到了问题的根本所在!!!
    解决办法: 监听页面的滑动事件,在滑动触发的时候,停止轮播的动画,OK~~ fine next!

    15.offsetLeft和offsetTop的使用

    offsetLeft值跟offsetTop值的获取跟父级元素没关系,而是跟其上一级的定位元素(除position:static;外的所有定位如fixed,relative,absolute)有关系,是距离上一个使用定位元素的距离

    16.scrollTo(0,0)和scrollTop=0

    苹果低版本的手机上不支持获取使用dom.scrollTo(0,0),使用该方法会报错。
    换言之,使用dom.scrollTop=0,就可以正常使用

    17.app内嵌H5,当app在后运行时,h5页面的所有js进程都会被停止。

    比如当我在内嵌的H5页面写一个定时器时,当我回到桌面,(这里并非是杀掉app,而是后台运行app),定时器就会暂时停止。只有当我回到app里面,定时器就会接着刚才的进程继续打印(这里并非是从头执行,而是接着执行)

    展开全文
  • 原文作者:腾讯技术 ...来源:知乎 本文真对 Flutter 的技术特性,做了一些略全面的入门级的介绍,如果你听说过Flutter,想去了解它,但是又不想去翻厚厚的API,那么本文就是为你准备的。 随着纯客户端到Hybrid技术,...

    原文作者:腾讯技术
    原文链接:https://zhuanlan.zhihu.com/p/90836859
    来源:知乎

    本文真对 Flutter 的技术特性,做了一些略全面的入门级的介绍,如果你听说过Flutter,想去了解它,但是又不想去翻厚厚的API,那么本文就是为你准备的。

    随着纯客户端到Hybrid技术,到RN&Weex,再到如今的Flutter技术,客户端实现技术不断前进。 在之前的一个APP项目中,因为历史原因当时选择了weex,随着使用的不断深入,我们逐渐发现了weex的渲染性能问题已经成为一个隐患和瓶颈。 而Flutter技术的不断成熟和流行,Flutter的良好的跨平台性和高性能优点,不断吸引着我们。

    (本文包含以下内容,阅读完需要约18分钟)

    • 1.Flutter是啥玩意儿?
    • 2.移动端跨平台技术对比
      2.1 H5+原生APP
      2.2 RN&Weex
      2.3 Flutter
    • 3.Dart语言
    • 4.环境配置
    • 5.Hello World
      5.1 创建项目
      5.2 项目结构
      5.3 启动模拟器
      5.4 启动项目APP
      5.5 简化版的Hello World
      5.6 给页面加上状态
      5.7 小结一下
    • 6.路由
      6.1 单个页面的跳转
      6.2 更多页面跳转使用路由表
      6.3 路由传参
    • 7.widget
      7.1 Text
      7.2 Button
      7.3 Container
      7.4 Image
    • 8.布局
      8.1 Row & Column & Center 行列轴布局
      8.2 Align 角定位布局
      8.3 Stack & Positioned 绝对定位
      8.4 Flex & Expanded 流式布局
    • 9.动画
      9.1 简单动画:淡入淡出
      9.2 复杂一些的动画:放大缩小
    • 10.http请求
      10.1 HttpClient
      10.2 http
      10.3 Dio
    • 11.吐吐槽
      11.1 墙
      11.2 组件过度设计
      11.3 嵌套太多不适应
      11.4 布局修改会导致嵌套关系修改
      11.5 Dart语言升级
      11.6 不能热更新
    • 12.结语

    1.Flutter是啥玩意儿?

    Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。

    • 具有跨平台开发特性,支持IOS、Android、Web三端。
    • 热重载特性大大提高了开发效率
    • 自绘UI引擎和编译成原生代码的方式,使得系统的运行时的高性能成为了可能
    • 使用Dart语言,目前已经支持同时编译成Web端代码,

    到底值不值得跟进Flutter技术呢? 还是看下Flutter,Weex,ReactNative的搜索指数对比,大概就知道这个行业趋势了。

    蓝色是Flutter,可以看出上升势头非常强劲。苦逼的前端就是这样,你不跟潮流,潮流就会把你抛弃。

    2.移动端跨平台技术对比

    为啥会有Flutter这种东西? 他的原理是什么? 他是怎么做到高性能的? 要明白这些问题,我们不得不从几种移动端跨平台技术的对比讲起。

    2.1 H5+原生APP

    技术门槛最低,接入速度最快,热更新最方便的,自然就是H5方式。APP中提供一个Webview使用H5页面的Http直连。APP和H5可以相互独立开发,JS使用Bridge与原生进行数据通信,显示界面依赖Webview的浏览器渲染。 但是带来的问题也很明显,因为是需要远程直连,那么初次打开H5页面,会有瞬间的白屏,并且Webview本身会有至少几十M的内存消耗。

    当然,作为前端开发人员,在H5方式可以使用SPA单页面、懒加载、离线H5等各种前端优化手段进行性能优化,以使得H5的表现更接近原生。但是首次的瞬间白屏和内存,Bridge的通信效率低下,始终是被技术框架给局限住了。

    2.2 RN&Weex

    由于H5的那些弊端,爱折腾的前端工程师,祭出了RN、Weex两个大杀器, 使用原生去解析RN、Weex的显示配置,显示层、逻辑层都直接与原生数据通信。 因为抛弃了浏览器,自然渲染性能、执行性能都提升了一大截。

    但是,每次遇到显示的变更,JS都还会通过Bridge和原生转一道再做渲染的调整,所以Bridge就最后成为了性能的瓶颈。在实际项目中,特别是做一些大量复杂动画处理的时候,由于渲染部分需要频繁通信,性能问题变得尤为突出。 有兴趣的同学可以去看看BindingX,里面有关于动画中数据通信效率低下导致动画帧率低下的详细说明。

    2.3 Flutter

    不得不佩服Google开发人员的想象力,为了达到极致性能,Flutter更前进了一步,Flutter代码编译完成以后,直接就是原生代码,并且使用自绘UI引擎原生方式做渲染。 Flutter依赖一个Skia 2D图形化引擎。Skia也是Android平台和Chrome的底层渲染引擎,所以性能方面完全不用担心。因为使用Dart做AOT编译成原生,自然也比使用解释性的JS在V8引擎中执行性能更快,并且因为去掉Bridge,没有了繁琐的数据通信和交互,性能就更前进了一步。

    3.Dart语言

    学习Flutter,得先了解Dart。Dart语言曾经雄心勃勃的要替换Javascript, 但是发布的时机正好遇到JS的飞速发展,于是就逐渐沉寂,直到配合Flutter的发布,才又重新焕发了生机。

    在最近2019年9月的一次Google开发者大会中,伴随着Flutter1.9的发布,目前的Dart也同时更新到了2.5版本, 提供了机器学习和对C跨平台调用的能力。总体来说,Dart语法,对于前端同学,上手还是很容易的,风格很像。

    关于Dart语法,请移步传送门:https://dart.dev/samples

    4.环境配置

    无论学什么新语言,首先都是环境配置。由于Flutter出自Google,所以有一定门槛,如果在公司内安装,你还需要一个方便的代理切换工具, 比如:Proxifier 。

    安装教程,参照官网:https://flutter.dev/docs/get-started/install

    Flutter支持多种编辑器如:Android Studio , XCode。 但是既然作为支持跨双端的开发,个人还是推荐使用 VSCode

    VSCode安装完成后,需要安装Flutter插件,和Dart插件. 在扩展窗口里,搜索Flutter,和Dart,点击“Install”即可,非常方便。

    如果安装不上去,记得开启下代理。

    5.Hello World

    作为一个伟大的程序员,第一行代码总是从Hello World开始。_

    5.1 创建项目:

    方法1:直接使用命令创建:

    flutter create projectname
    
    

    方法2:使用VSCode创建:

    View -> Command Palette -> Flutter:New Project 即可

    注意请先打开代理,否则你的创建进度,会一直被卡住。

    5.2 项目结构

    将项目先拖入VSCode,看下目录结构。自动创建完成的项目中,我们看到已经自带了Android,IOS相关的运行环境。

    入口主文件是main.dart. 可以打开来先熟悉下,暂时不了解没关系,后面再讲。

    还有一个重要的文件是pubspec.yaml ,是项目的配置文件,这个后续也会做修改。

    5.3 启动模拟器

    点击VSCode右下角的模拟器,启动模拟器。(VSCode会自动找到Android环境、IOS环境下的模拟器,以及真机环境)

    5.4 启动项目APP

    选中Main.dart, 点击Debug-> Start Debugging , 项目就会启动调试,并在模拟器里运行。

    5.5 简化版的Hello World

    讲道理,Flutter一上来就用StatefulWidget做一个自增的Demo,其实是对新手不太友好。 我还是喜欢循序渐进,先删掉那些复杂的自增逻辑,我们基于StatelessWidget 只做一个最简单的静态页面显示。(什么是StatefulWidget 和StatelessWidget?后面会说)

    main.dart

    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          home: MyHomePage(),
        );
      }
    }
    
    class MyHomePage extends StatelessWidget{
       @override
      Widget build(BuildContext context) {
           return Scaffold(
                appBar: AppBar(
                  title: Text("我是Title"),
                ),
                body: Center(
                        child: Text(
                            'Hello World',
                        )
                )
          );
      }  
    }
    
    

    在上面的代码中,可以清楚看到,最简单的页面的层级关系:

    MaterialApp -> MyHomePage -> Scaffold -> body -> Center -> Text

    **Scaffold是啥?**他是Flutter的页面脚手架,你可以当HTML页面一样去理解,不同的是,他除了Body以外,还提供appBar顶部TitleBar、bottomNavigationBar底部导航栏等属性。

    显示效果:

    这是最简单的页面,没有交互,只有显示,但是实际业务场景中,是不太可能都是这种页面的,页面上的数据一般都是来自接口返回,然后再在页面上进行动态的渲染。 此时,就需要使用使用带状态的StatefulWidget了

    5.6 给页面加上状态

    给自己一个需求,按钮点击时,修改页面上显示的文字“Hello World” 变成“You Click Me”

    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          home: MyHomePage(),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget{
      @override
      MyHomePageState createState() => MyHomePageState();
    }
    
    class MyHomePageState extends State<MyHomePage>{
       var msg="Hello World"; //msg默认文字
       @override
       Widget build(BuildContext context) {
           return Scaffold(
                appBar: AppBar(
                  title: Text("我是Title"),
                ),
                body: Center(
                          child:Column(
                                  children:<Widget>[
                                      Text(msg), //根据变量值,显示文字
                                      FlatButton(
                                          color: Colors.blue,
                                          textColor: Colors.white,
                                          //点击按钮,修改msg的文字
                                          onPressed: () {
                                            setState(() {
                                              this.msg="You Click ME";
                                            });
                                          },
                                          child: Text(
                                            "Click ME",
                                            style: TextStyle(fontSize: 20.0),
                                          ),
                                      )
                                  ]
                          )
                      )
          );
      }  
    
    }
    
    

    执行效果:

    上面最关键的一段代码就是这个:

     onPressed: () {
             setState(() {
                    this.msg="You Click ME";
              });
     },
    
    

    相信写过小程序的同学,对这个 setState 还是很眼熟的 _

    5.7 小结一下

    StatelessWidget:无状态变更,UI静态固化的Widget, 页面渲染性能更高。
    StatefulWidget:因状态变更可以导致UI变更的的Widget,涉及到数据渲染场景,都使用StatefulWidget。

    为啥要分两个? StatelessWidget拥有的功能,StatefulWidget都有了啊?

    答案只有一个:性能、性能、性能

    在StatefulWidget里,因为要维护状态,他的生命周期比StatelessWidget更复杂,每次执行setState,都会触发
    window.scheduleFrame() 导致整个页面的widget被刷新,性能就会降低。

    使用过小程序的同学在这点上应该有体会,在小程序的官方文档中,会强烈建议减少setData的使用频率,以避免性能的下降。 只不过flutter更是激进,推出了StatelessWidget,并直接在该Widget里砍掉了setState的使用。

    页面结构关系如下:

    6.路由

    实际的项目,是有多个不同的页面的,页面之间的跳转,就要用到路由了。 我们增加一个list页面,点击Home页的“Click Me”按钮,跳转到列表页list。

    6.1 单个页面的跳转

    增加list.dart

    import 'package:flutter/material.dart';
    
    class ListPage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        //定义列表widget的list
        List<Widget> list=<Widget>[];
    
        //Demo数据定义
        var data=[
          {"id":1,"title":"测试数据AAA","subtitle":"ASDFASDFASDF"},
          {"id":2,"title":"测试数据bbb","subtitle":"ASDFASDFASDF"},
          {"id":3,"title":"测试数据ccc","subtitle":"ASDFASDFASDF"},
          {"id":4,"title":"测试数据eee","subtitle":"ASDFASDFASDF"},
        ];
    
        //根据Demo数据,构造列表ListTile组件list
        for (var item in data) {
          print(item["title"]);
    
          list.add( ListTile( 
              title: Text(item["title"],style: TextStyle(fontSize: 18.0) ),
              subtitle: Text(item["subtitle"]),
              leading:  Icon( Icons.fastfood, color:Colors.orange ),
              trailing: Icon(Icons.keyboard_arrow_right)
          ));
        }
    
        //返回整个页面
        return Scaffold(
          appBar: AppBar(
            title: Text("List Page"),
          ),
          body: Center(
            child: ListView(
              children: list,
            )
          ),
        );
      }
    }
    
    

    在main.dart增加list页面的引入

    import 'list.dart';
    
    

    修改Home页的按钮事件,增加Navigator.push跳转

    FlatButton(
              color: Colors.blue,textColor: Colors.white,
              onPressed: () {    
                           Navigator.push(context, MaterialPageRoute(builder:(context) {
                                    return  ListPage();
                           }));
                  },
               child: Text("Click ME",style: TextStyle(fontSize: 20.0) ),
        )
    
    

    核心方法就是:Navigator.push(context,MaterialPageRoute)

    跳转示例:

    6.2 更多页面跳转使用路由表

    在MaterialApp中,有一个属性是routes,我们可以对路由进行命名,这样跳转的时候,只需要使用对应的路由名字即可,如:Navigator.pushNamed(context, RouterName)。点击两个不同的按钮,分别跳转到ListPage,和Page2去。

    Main.dart修改一下如下

    import 'package:flutter/material.dart';
    import 'list.dart';
    import 'page2.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          //路由表定义
          routes:{
            "ListPage":(context)=> ListPage(),
            "Page2":(context)=> Page2(),
          },
          home: MyHomePage(),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget{
      @override
      MyHomePageState createState() => MyHomePageState();
    }
    
    class MyHomePageState extends State<MyHomePage>{
       @override
       Widget build(BuildContext context) {
           return Scaffold(
                appBar: AppBar(
                  title: Text("我是Title"),
                ),
                body: Center(
                          child:Column(
                                  children:<Widget>[
                                      RaisedButton(
                                          child: Text("Clikc to ListPage" ),
                                          onPressed: () {
                                            //根据命名路由做跳转
                                             Navigator.pushNamed(context, "ListPage");
                                          },
                                      ),
                                       RaisedButton(
                                          child: Text("Click to Page2" ),
                                          onPressed: () {
                                              //根据命名路由做跳转
                                             Navigator.pushNamed(context, "Page2");
                                          },
                                      )
    
                                  ]
                          )
                      )
          );
      }  
    
    }
    
    

    示例:

    当我们有了路由以后,就可以开始在一个项目里用不同的页面,去学习不同的功能了。

    6.3 路由传参

    列表页跳转到详情页,需要路由传参,这个在flutter体系里,又是怎么做的呢?

    首先,在main.dart里,增加详情页DedailPage的路由配置

    //路由表定义
          routes:{
            "ListPage":(context)=> ListPage(),
            "Page2":(context)=> Page2(),
            "DetailPage":(context)=> DetailPage(), //增加详情页的路由配置
          },
    
    

    并修改ListPage里ListTile的点击事件,增加路由跳转传参,这里是将整个item数据对象传递

    ListTile( 
              title: Text(item["title"],style: TextStyle(fontSize: 18.0) ),
              subtitle: Text(item["subtitle"]),
              leading:  Icon( Icons.fastfood, color:Colors.orange ),
              trailing: Icon(Icons.keyboard_arrow_right),
              onTap:(){
                //点击的时候,进行路由跳转传参
                 Navigator.pushNamed(context, "DetailPage", arguments:item);
              },
          )
    
    

    详情页DetailPage里,获取传参并显示

    import 'package:flutter/material.dart';
    class DetailPage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
         //获取路由传参
         final Map args = ModalRoute.of(context).settings.arguments;
    
        return Scaffold(
          appBar: AppBar(
            title: Text("Detail Page"),
          ),
          body: 
            new Column(
              children: <Widget>[
                 Text("我是Detail页面"),
                 Text("id:${args['id']}" ),
                 Text("id:${args['title']}"),
                 Text("id:${args['subtitle']}")
              ],
            )
          );
      }
    }
    
    

    Demo效果:

    7.widget

    Flutter提供了很多默认的组件,而每个组件的都继承自widget 。 在Flutter眼里:一切都是widget。 这句看起来是不是很熟悉? 还记得在webpack里,一切都是module吗? 类似的还有java的一切都是对象。貌似任何一个技术,最后都是用哲学作为指导思想。

    widget,作为可视化的UI组件,包含了显示UI、功能交互两部分。大的widget,也可以由多个小的widget组合而成。

    常用的widget组件:

    7.1 Text

    Demo:

    Text(
             "Hello world",
             style: TextStyle(
                          fontSize: 50,
                          fontWeight: FontWeight.bold,
                          color:Color(0xFF0000ff)
                      )
        ),
    
    

    Text的样式,来自另一个widget:TextStyle。 而TextStyle里的color,又是另一个widget Color的实例。

    如果用flutter的缩进的方法,看起来确实有点丑陋,习惯写CSS的前端同学,可以看看下面的风格:

    Text( "Hello world", style: TextStyle( fontSize: 50,fontWeight: FontWeight.bold,color:Color(0xFF0000ff) ) )
    
    

    写成一行,是不是就顺眼多了?这算前端恶习吗?_

    7.2 Button

    对于flutter来说,Button就提供了很多种,我们来看看他们的区别:

    RaisedButton: 凸起的按钮
    FlatButton:扁平化按钮
    OutlineButton:带边框按钮
    IconButton:带图标按钮

    按钮测试页dart:

    import 'package:flutter/material.dart';
    
    class ButtonPage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
    
        return Scaffold(
          appBar: AppBar(
            title: Text("Button Page"),
          ),
          body: Column(
            children: <Widget>[
                 RaisedButton(
                      child: Text("我是 RaiseButton" ),
                      onPressed: () {},
                  ),
                   FlatButton(
                      child: Text("我是 FlatButton" ),
                      color: Colors.blue,
                      onPressed: () {},
                  ),
                  OutlineButton(
                      child: Text("我是 OutlineButton" ),
                      textColor: Colors.blue,
                      onPressed: () {},
                  ),
                  IconButton(
                      icon: Icon(Icons.add),
                      onPressed: () {},
                  )  
            ]
          )
        );
      }
    }
    
    

    Demo:

    项目中要用哪个,就各取所需吧~

    7.3 Container

    Container是非常常用的一个widget,他一般是用作一个容器。我们先来看看他的基础属性,顺便可以想想他像HTML里的啥?

    基础属性:width,height,color,child

    body: Center(
            child: Container(
               color: Colors.blue,
               width: 200,
               height: 200,
               child: Text("Hello Container ",style:TextStyle(fontSize: 20,color: Colors.white)),
            )
          )
    
    

    Padding

    我们也可以不设置宽高,用padding在内部撑开增加留白:

    Container(
               color: Colors.blue,
               padding: EdgeInsets.all(30),
               child: Text("Hello Container ",style:TextStyle(fontSize: 20,color: Colors.white)),
    
            )
    
    

    Margin

    我们还可以使用margin,在容器的外部撑开增加偏移量,

    Container(
               color: Colors.blue,
               padding: EdgeInsets.all(30),
               margin: EdgeInsets.only(left: 150,top: 0,right: 0,bottom: 0),
               child: Text("Hello Container ",style:TextStyle(fontSize: 20,color: Colors.white)),
            )
    
    

    Transform

    我们还可以给这个矩形,使用tansform做一些变化,比如,旋转一个角度

    Container(
               color: Colors.blue,
               padding: EdgeInsets.all(30),
               child: Text("Hello Container ",style:TextStyle(fontSize: 20,color: Colors.white)),
               transform: Matrix4.rotationZ(0.5)
            )
    
    

    看到这里,好多前端同学要说了,好熟悉啊。 对,他就是很像Html里的一个东西:DIV,你确实可以对应的去加强理解。

    7.4 Image

    网络图片加载

    使用NetworkImage,可以做网络图片的加载:

    child:Image(
              image: NetworkImage("https://mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/qq_logo_2x.png"),
               width: 200.0,
            )  
    
    

    本地图片加载

    加载本地图片,就稍微复杂一些,首先要把图片的路径配置,加入到之前说过的pubspec.yaml配置文件里去:

    加载本地图片时使用AssetImage:

    child:Image(
                   image: AssetImage("assets/images/logo.png"),
                    width: 200.0,
                )      
    
    

    也可以使用简写:

     Image.asset("assets/images/logo.png",width:200.0)
    
    

    flutter提供的组件很多,这里就不一一举例说明,有兴趣的还是建议大家去看API:https://api.flutter.dev/

    8.布局

    我们已经了解了这么多组件,那么怎么绘制一个完整的页面呢? 这就到了页面布局的部分了。

    8.1 Row & Column & Center 行列轴布局

    字面意义也很好理解,行布局、列布局、居中布局,这些布局对于Flutter来说,也都是一个个的widget。

    区别在于,row、column 是有多个children的widget, 而Center是只有 1个child的 widget。

     Row(
         children:<Widget>[]
     ) 
    
     Column(
         children:<Widget>[]
     )    
    
     Center(
          child:Text("Hello")
     )
    
    

    8.2 Align 角定位布局

    我们常常在Container里,需要显示的内容在左上角,左下角,右上角,右下角。 在html时代,使用CSS可以很容易的实现,但是flutter里,必须依赖Align 这个定位的Widget

    右下角定位示例:

     child: Container(
               color: Colors.blue,
               width: 300,
               height: 200,
               child: Align(
                          alignment: Alignment.bottomRight,
                          child:Text("Hello Align ",style:TextStyle(fontSize: 20,color: Colors.white)),
                      )
            )
    
    

    显示效果:

    Alignment提供了多种定位供选择,还算是很贴心的。

    8.3 Stack & Positioned 绝对定位

    当然还有绝对定位的需求,这在css里,使用position:absolute就搞定了,但是在flutter里,需要借助stack+ positioned两个widget一起组合使用。

    Stack: 支持元素堆叠
    Positioned:支持绝对定位

    child:Stack(
                  children: <Widget>[
                      Image.network("https://ossweb-img.qq.com/upload/adw/image/20191022/627bdf586e0de8a29d5a48b86700a790.jpeg"),
                      Positioned(
                        top: 20,
                        right: 10,
                        child:Image.asset("assets/images/logo.png",width:200.0)
                      )
                  ],
                )
    
    

    8.4 Flex & Expanded 流式布局

    Flex流式布局作为前端同学都熟悉,之前讲过的Row,Column,其实都是继承自Flex,也属于流式布局。

    如果轴向不确定,使用Flex,通过修改direction的值设定轴向
    如果轴向已确定,使用Row,Column,布局更简洁,更有语义化

    Flex测试页:

    class FlexPage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
    
        return Scaffold(
          appBar: AppBar(
            title: Text("Flex Page"),
          ),
          body:  Flex(
              direction: Axis.horizontal,
              children: <Widget>[
                Container(
                  width: 30,
                  height: 100,
                  color: Colors.blue,
                ),
                Expanded(
                  flex: 1,
                  child: Container(
                    height: 100.0,
                    color: Colors.red,
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Container(
                    height: 100.0,
                    color: Colors.green,
                  ),
                ),
              ],
            ),
        );
      }
    }
    
    

    示例中,轴向横向排列,最左边一个固定宽度的Container,右边两个Expanded,各自占剩下的宽度的一半。

    9.动画

    Flutter既然说了,一切都是Widget,包括动画实现,也是一个Widget。 我们还是看一个示例

    9.1 简单动画:淡入淡出:

    使用flutter提供的现成的Widget:

    import 'package:flutter/material.dart';
    
    class AnimatePage extends StatefulWidget {
      _AnimatePage  createState()=> _AnimatePage();
    } 
    
    class _AnimatePage extends State<AnimatePage> {
      bool _visible=true;
      @override
      Widget build(BuildContext context) {
    
        return Scaffold(
          appBar: AppBar(
            title: Text("Animate Page"),
          ),
          body: 
              Center(
    
                child: Column(
                      children: <Widget>[
                          AnimatedOpacity(
                            opacity: _visible ? 1.0:0.0,
                            duration: Duration(milliseconds: 1000),
                            child: Image.asset("assets/images/logo.png"),
                          ),
    
                          RaisedButton(
                            child: Text("显示隐藏"),
                            onPressed: (){
                              setState(() {
                                _visible=!_visible;
                              });
                             },
                          ),
    
                      ],
                    ),
              )    
          );
    
      }
    }
    
    

    其中的AnimatedOpacity就是动画透明度变化的的Widget,而被透明度控制变化的Image则是AnimatedOpacity的子元素。这个和以往前端写动画的方式,就完全不一样了,需要改变一下思维方式。

    Demo效果

    9.2 复杂一些的动画:放大缩小

    当写复杂一些动画的时候,没有对应的widget组件,就需要自己使用Animation,和AnimationController,以及Tween来组合。

    Animation: 保存动画的值和状态
    AnimationController: 控制动画,包含:启动forward()、停止stop()、反向播放reverse()等方法
    Tween: 提供begin,end作为动画变化的取值范围
    Curve:设置动画使用曲线变化,如非匀速动画,先加速,后减速等的设定。

    动画示例:

    class AnimatePage2 extends StatefulWidget {
      _AnimatePage  createState()=> _AnimatePage();
    } 
    
    class _AnimatePage extends State<AnimatePage2>  with SingleTickerProviderStateMixin {
    
      Animation<double> animation;
      AnimationController controller;
    
      initState() {
        super.initState();
        controller =  AnimationController(duration:  Duration(seconds: 3), vsync: this);
    
         //使用弹性曲线,数据变化从0到300
         animation = CurvedAnimation(parent: controller, curve: Curves.bounceIn);
         animation = Tween(begin: 0.0, end: 300.0).animate(animation)
          ..addListener(() {
            setState(() {
            });
          });
    
        //启动动画(正向执行)
        controller.forward();
      }
    
      @override
      Widget build(BuildContext context) {
    
        return Scaffold(
          appBar: AppBar(
            title: Text("Animate Page"),
          ),
          body: 
              Center(
                  child: Image.asset(
                      "assets/images/logo.png",
                      width: animation.value, 
                      height: animation.value
                  ),
                )  
          );   
      }
    
      dispose() {
        //路由销毁时需要释放动画资源
        controller.dispose();
        super.dispose();
      }
    
    }
    
    

    很重要的一点,在路由销毁的时候,需要释放动画资源,否则容易导致内存泄漏

    显示Demo:

    image

    10.http请求

    做业务逻辑,总离不开http请求,接下来,就来看下flutter的http请求是如何做的。

    10.1 HttpClient

    httpClient在 dart:io库中,不需要引入第三方库就可以使用,示例代码如下:

    使用示例

    import 'dart:convert';
    import 'dart:io';
    
    Future _getByHttpClient() async{
        //接口地址
        const url="https://www.demo.com/api";
    
        //定义httpClient
        HttpClient client = new HttpClient();
        //定义request
        HttpClientRequest request = await client.getUrl(Uri.parse(url));
        //定义reponse
        HttpClientResponse response = await request.close();
        //respinse返回的数据,是字符串
        String responseBody = await response.transform(utf8.decoder).join();
        //关闭httpClient
        client.close();
        //字符串需要转化为JSON
        var json= jsonDecode(responseBody);
        return json;
    
    } 
    
    

    总的看起来,代码还是挺繁琐的,使用起来并不方便。

    10.2 http

    这是Dart.dev提供的第三方类库,地址:https://pub.dev/packages/http

    需要先在pubspec.yaml里添加类库应用

    dependencies:
      flutter:
        sdk: flutter
      json_annotation: ^2.0.0
      http: ^0.12.0+2
    
    

    使用示例:

    Future _getByDartHttp() async {
      // 接口地址
     const url="https://www.demo.com/api";//获取接口的返回值
     final response = await http.get(url);
     //接口的返回值转化为JSON
     var json = jsonDecode(response.body); 
     return json;
    }
    
    

    这种写法,比上面的httpClient简洁了许多。

    Dio

    国内使用最广泛的,还是flutterchina在github上提供的Dio第三方库,目前Star达到了5800多个。

    官网地址:https://github.com/flutterchina/dio

    使用Dio,因为是第三方库,所以同样要先在 pubspec.yaml 添加第三方库引用。

    dependencies:
      flutter:
        sdk: flutter
      json_annotation: ^2.0.0
      dio: 2.1.16
    
    

    使用示例:

    import 'package:dio/dio.dart';
    
    Future _getByDio() async{
    
          // 接口地址
          const url="https://www.demo.com/api";
    
          //定义 Dio实例
          Dio dio = new Dio();
          //获取dio返回的Response
          Response response = await dio.get(url);
          //返回值转化为JSON
          var json=jsonDecode(response.data);
          return json;
    }
    
    

    接口调用也是比httpclient简单很多,可能由于fluterchina在他的官方教程里,极力推荐这个dio库,所以目前这个第三方库的使用情况最为广泛。和Dart.dev的http不同的是,他需要new一个Dio的实例,在创建实例的时候,还可以传入更多的扩展配置参数。

    BaseOptions options = new BaseOptions(
        baseUrl: "https://www.xx.com/api",
        connectTimeout: 5000,
        receiveTimeout: 3000,
    );
    Dio dio = new Dio(options);
    
    

    11.吐吐槽

    学习Flutter的过程中,其实还是有很多坎坷和需要吐槽的地方。

    11.1 墙

    因为有墙在,所以在配置flutter,或者下载flutter插件和第三方库的时候,需要墙内外来回切换。

    11.2 组件过度设计

    提供的各种widget组件很多,但是真正核心的组件、常用的组件,也就哪些。 比如Flex 和column、row的关系,比如,Tween 与IntTween,ColorTween,SizeTween等20多个Tween子类之间的关系,你需要花很大的精力,去看每个具体子类的实现差别。

    11.3 嵌套太多不适应

    因为嵌套层级很多,而且布局、动画、功能都在一起,第一次上手Flutter和Dart,这种嵌套关系让人很晕菜,这个只能去慢慢克服。 另外,多开发自定义的组件,可以让嵌套关系看起来清晰一些。

    11.4 布局修改会导致嵌套关系修改

    前端的html+css分离世界里,不改变嵌套关系,修改CSS就可以调整布局。 但是在Flutter里因为布局也是嵌套关系,这就导致必须去改变嵌套关系。 要让嵌套更简单变动影响更小,页面拆分成子组件变得尤为重要。

    11.5 Dart语言升级

    没错,语言升级也会导致学习的困扰,外面的资料新旧都有,比如有些是 new Text() ,有些直接是Text() ,新手上路会很晕菜。 其实这都是Dart语言升级导致的,记住Dart升级2.X以后,都不使用new了。感兴趣的可以自己去看下Dart的升级变更说明。

    11.6 不能热更新

    年中的时候,Google官方宣布flutter暂不官方支持热更新,但是闲鱼团队已经有了自己的热更新方案。 关于热更新,只能静观其变了。 性能、开发效率、热更新,总是要有取舍的。即使是闲鱼团队,热更新也是付出了一点点性能下降的代价的,这是你选择flutter的初衷吗?还是那句话:权衡得失。

    12.结语

    随着 9 月谷歌发布 Flutter1.9 以及flutter for web,Flutter的组件化思路,使得一份代码跨三端变成可能,相信Flutter的未来会更加广阔。

    这不是一篇教程,只是在学习Flutter过程中的一点体验和经历,也因为时间关系,研究并不深入,如有疏漏,还请不吝赐教。

    学习分享,共勉

    题外话,毕竟我在三星小米工作多年,深知技术改革和创新的方向,Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心,但很多FLutter兴趣爱好者进阶学习确实资料,今天我把我搜集和整理的这份学习资料分享给有需要的人,若有关Flutter学习进阶可以与我在Flutter跨平台开发终极之选交流群一起讨论交流。下载地址:https://shimo.im/docs/yTD3t8Pjq3XJtGv8

    下载地址:https://shimo.im/docs/yTD3t8Pjq3XJtGv8

    展开全文
  • 本文作者:dickma,腾讯 IEG 前端开发工程师本文不是Flutter的教程,只是对 Flutter 的技术特性,做了一些略全面的入门级的介绍,如果你听说过Flutt...
        

    640?wx_fmt=gif

    本文作者:dickma,腾讯 IEG 前端开发工程师

    本文不是Flutter的教程,只是对 Flutter 的技术特性,做了一些略全面的入门级的介绍,如果你听说过Flutter,想去了解他,但是又不想去翻厚厚的API,那么本文就是为你准备的。

    随着纯客户端到Hybrid技术,到RN&Weex,再到如今的Flutter技术,客户端实现技术不断前进。在之前的一个APP项目中,因为历史原因当时选择了weex,随着使用的不断深入,我们逐渐发现了weex的渲染性能问题已经成为一个隐患和瓶颈。随着Flutter技术的不断成熟和流行,Flutter的良好的跨平台性和高性能优点,不断吸引着我们,他是否可以帮助我们解决这些问题呢?因此,才有本文这篇技术尝试。

    (本文包含以下内容,阅读完需要约18分钟)

    • 1.Flutter是啥玩意儿?

    • 2.移动端跨平台技术对比

      2.1 H5+原生APP

      2.2 RN&Weex

      2.3 Flutter

    • 3.Dart语言

    • 4.环境配置

    • 5.Hello World

      5.1 创建项目

      5.2 项目结构

      5.3 启动模拟器

      5.4 启动项目APP

      5.5 简化版的Hello World

      5.6 给页面加上状态

      5.7 小结一下

    • 6.路由

      6.1 单个页面的跳转

      6.2 更多页面跳转使用路由表

      6.3 路由传参

    • 7.widget

      7.1 Text

      7.2 Button

      7.3 Container

      7.4 Image

    • 8.布局

      8.1 Row & Column & Center 行列轴布局

      8.2 Align 角定位布局

      8.3 Stack & Positioned 绝对定位

      8.4 Flex & Expanded 流式布局

    • 9.动画

      9.1 简单动画:淡入淡出

      9.2 复杂一些的动画:放大缩小

    • 10.http请求

      10.1 HttpClient

      10.2 http

      10.3 Dio

    • 11.吐吐槽

      11.1 墙

      11.2 组件过度设计

      11.3 嵌套太多不适应

      11.4 布局修改会导致嵌套关系修改

      11.5 Dart语言升级

      11.6 不能热更新

    • 12.结语


    1.Flutter是啥玩意儿?

    Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。

    • 具有跨平台开发特性,支持IOS、Android、Web三端。

    • 热重载特性大大提高了开发效率

    • 自绘UI引擎和编译成原生代码的方式,使得系统的运行时的高性能成为了可能

    • 使用Dart语言,目前已经支持同时编译成Web端代码,

    到底值不值得跟进Flutter技术呢?还是看下Flutter,Weex,ReactNative的搜索指数对比,大概就知道这个行业趋势了。

    640?wx_fmt=png

    蓝色是Flutter,可以看出上升势头非常强劲。苦逼的前端就是这样,你不跟潮流,潮流就会把你抛弃。


    2.移动端跨平台技术对比

    为啥会有Flutter这种东西? 他的原理是什么?他是怎么做到高性能的?要明白这些问题,我们不得不从几种移动端跨平台技术的对比讲起。

    2.1 H5+原生APP

    640?wx_fmt=png
    图片来源于网络

    技术门槛最低,接入速度最快,热更新最方便的,自然就是H5方式。APP中提供一个Webview使用H5页面的Http直连。APP和H5可以相互独立开发,JS使用Bridge与原生进行数据通信,显示界面依赖Webview的浏览器渲染。但是带来的问题也很明显,因为是需要远程直连,那么初次打开H5页面,会有瞬间的白屏,并且Webview本身会有至少几十M的内存消耗。

    当然,作为前端开发人员,在H5方式可以使用SPA单页面、懒加载、离线H5等各种前端优化手段进行性能优化,以使得H5的表现更接近原生。但是首次的瞬间白屏和内存,Bridge的通信效率低下,始终是被技术框架给局限住了。

    2.2 RN&Weex

    640?wx_fmt=png
    图片来源于网络

    由于H5的那些弊端,爱折腾的前端工程师,祭出了RN、Weex两个大杀器, 使用原生去解析RN、Weex的显示配置,显示层、逻辑层都直接与原生数据通信。因为抛弃了浏览器,自然渲染性能、执行性能都提升了一大截。

    但是,每次遇到显示的变更,JS都还会通过Bridge和原生转一道再做渲染的调整,所以Bridge就最后成为了性能的瓶颈。在实际项目中,特别是做一些大量复杂动画处理的时候,由于渲染部分需要频繁通信,性能问题变得尤为突出。有兴趣的同学可以去看看BindingX,里面有关于动画中数据通信效率低下导致动画帧率低下的详细说明。

    2.3 Flutter

    640?wx_fmt=png
    图片来源于网络

    不得不佩服Google开发人员的想象力,为了达到极致性能,Flutter更前进了一步,Flutter代码编译完成以后,直接就是原生代码,并且使用自绘UI引擎原生方式做渲染。Flutter依赖一个Skia 2D图形化引擎。Skia也是Android平台和Chrome的底层渲染引擎,所以性能方面完全不用担心。因为使用Dart做AOT编译成原生,自然也比使用解释性的JS在V8引擎中执行性能更快,并且因为去掉Bridge,没有了繁琐的数据通信和交互,性能就更前进了一步。


    3.Dart语言

    学习Flutter,得先了解Dart。Dart语言曾经雄心勃勃的要替换Javascript, 但是发布的时机正好遇到JS的飞速发展,于是就逐渐沉寂,直到配合Flutter的发布,才又重新焕发了生机。

    在最近2019年9月的一次Google开发者大会中,伴随着Flutter1.9的发布,目前的Dart也同时更新到了2.5版本, 提供了机器学习和对C跨平台调用的能力。总体来说,Dart语法,对于前端同学,上手还是很容易的,风格很像。

    640?wx_fmt=png

    关于Dart语法,请移步传送门:https://dart.dev/samples


    4.环境配置

    无论学什么新语言,首先都是环境配置。由于Flutter出自Google,所以,,如果在公司内安装,你还需要一个方便的代理切换工具, 比如:Proxifier

    安装教程,参照官网:https://flutter.dev/docs/get-started/install

    Flutter支持多种编辑器如:Android Studio , XCode。但是既然作为支持跨双端的开发,个人还是推荐使用 VSCode

    VSCode安装完成后,需要安装Flutter插件,和Dart插件. 在扩展窗口里,搜索Flutter,和Dart,点击“Install”即可,非常方便。

    640?wx_fmt=png

    如果安装不上去,记得开启下代理,代理配置如下:

    640?wx_fmt=png


    5.Hello World

    作为一个伟大的程序员,第一行代码总是从Hello World开始。^_^

    5.1 创建项目:

    方法1:直接使用命令创建:

    flutter create projectname
    

    方法2:使用VSCode创建:

    View -> Command Palette -> Flutter:New Project 即可

    640?wx_fmt=png
    640?wx_fmt=png

    注意请先打开代理,否则你的创建进度,会一直被卡住。

    5.2 项目结构

    将项目先拖入VSCode,看下目录结构。自动创建完成的项目中,我们看到已经自带了Android,IOS相关的运行环境。

    入口主文件是main.dart. 可以打开来先熟悉下,暂时不了解没关系,后面再讲。

    还有一个重要的文件是pubspec.yaml ,是项目的配置文件,这个后续也会做修改。

    640?wx_fmt=png


    5.3 启动模拟器

    点击VSCode右下角的模拟器,启动模拟器。(VSCode会自动找到Android环境、IOS环境下的模拟器,以及真机环境)

    640?wx_fmt=png


    5.4 启动项目APP

    640?wx_fmt=png

    选中Main.dart, 点击Debug-> Start Debugging , 项目就会启动调试,并在模拟器里运行。

    640?wx_fmt=png


    5.5 简化版的Hello World

    讲道理,Flutter一上来就用StatefulWidget做一个自增的Demo,其实是对新手不太友好。我还是喜欢循序渐进,先删掉那些复杂的自增逻辑,我们基于StatelessWidget 只做一个最简单的静态页面显示。(什么是StatefulWidget 和StatelessWidget?后面会说)

    main.dart

    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          home: MyHomePage(),
        );
      }
    }
    
    class MyHomePage extends StatelessWidget{
       @override
      Widget build(BuildContext context) {
           return Scaffold(
                appBar: AppBar(
                  title: Text("我是Title"),
                ),
                body: Center(
                        child: Text(
                            'Hello World',
                        )
                )
          );
      }  
    }
    

    在上面的代码中,可以清楚看到,最简单的页面的层级关系:

    MaterialApp -> MyHomePage -> Scaffold -> body -> Center -> Text

    Scaffold是啥?他是Flutter的页面脚手架,你可以当HTML页面一样去理解,不同的是,他除了Body以外,还提供appBar顶部TitleBar、bottomNavigationBar底部导航栏等属性。

    显示效果:

    640?wx_fmt=png

    这是最简单的页面,没有交互,只有显示,但是实际业务场景中,是不太可能都是这种页面的,页面上的数据一般都是来自接口返回,然后再在页面上进行动态的渲染。此时,就需要使用使用带状态的StatefulWidget了

    5.6 给页面加上状态

    给自己一个需求,按钮点击时,修改页面上显示的文字“Hello World” 变成“You Click Me”

    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          home: MyHomePage(),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget{
      @override
      MyHomePageState createState() => MyHomePageState();
    }
    
    class MyHomePageState extends State<MyHomePage>{
       var msg="Hello World"; //msg默认文字
       @override
       Widget build(BuildContext context) {
           return Scaffold(
                appBar: AppBar(
                  title: Text("我是Title"),
                ),
                body: Center(
                          child:Column(
                                  children:<Widget>[
                                      Text(msg), //根据变量值,显示文字
                                      FlatButton(
                                          color: Colors.blue,
                                          textColor: Colors.white,
                                          //点击按钮,修改msg的文字
                                          onPressed: () {
                                            setState(() {
                                              this.msg="You Click ME";
                                            });
                                          },
                                          child: Text(
                                            "Click ME",
                                            style: TextStyle(fontSize: 20.0),
                                          ),
                                      )
                                  ]
                          )
                      )
          );
      }  
    
    }
    

    执行效果:

    640?wx_fmt=gif

    上面最关键的一段代码就是这个:

     onPressed: () {
             setState(() {
                    this.msg="You Click ME";
              });
     },
    

    相信写过小程序的同学,对这个 setState 还是很眼熟的 ^_^


    5.7 小结一下

    StatelessWidget:无状态变更,UI静态固化的Widget, 页面渲染性能更高。

    StatefulWidget:因状态变更可以导致UI变更的的Widget,涉及到数据渲染场景,都使用StatefulWidget。

    为啥要分两个?StatelessWidget拥有的功能,StatefulWidget都有了啊?

    答案只有一个:性能、性能、性能

    在StatefulWidget里,因为要维护状态,他的生命周期比StatelessWidget更复杂,每次执行setState,都会触发

    使用过小程序的同学在这点上应该有体会,在小程序的官方文档中,会强烈建议减少setData的使用频率,以避免性能的下降。只不过flutter更是激进,推出了StatelessWidget,并直接在该Widget里砍掉了setState的使用。

    页面结构关系如下:

    640?wx_fmt=png


    6.路由

    实际的项目,是有多个不同的页面的,页面之间的跳转,就要用到路由了。我们增加一个list页面,点击Home页的“Click Me”按钮,跳转到列表页list。

    6.1 单个页面的跳转

    增加list.dart

    import 'package:flutter/material.dart';
    
    class ListPage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        //定义列表widget的list
        List<Widget> list=<Widget>[];
    
        //Demo数据定义
        var data=[
          {"id":1,"title":"测试数据AAA","subtitle":"ASDFASDFASDF"},
          {"id":2,"title":"测试数据bbb","subtitle":"ASDFASDFASDF"},
          {"id":3,"title":"测试数据ccc","subtitle":"ASDFASDFASDF"},
          {"id":4,"title":"测试数据eee","subtitle":"ASDFASDFASDF"},
        ];
    
        //根据Demo数据,构造列表ListTile组件list
        for (var item in data) {
          print(item["title"]);
    
          list.add( ListTile( 
              title: Text(item["title"],style: TextStyle(fontSize: 18.0) ),
              subtitle: Text(item["subtitle"]),
              leading:  Icon( Icons.fastfood, color:Colors.orange ),
              trailing: Icon(Icons.keyboard_arrow_right)
          ));
        }
    
        //返回整个页面
        return Scaffold(
          appBar: AppBar(
            title: Text("List Page"),
          ),
          body: Center(
            child: ListView(
              children: list,
            )
          ),
        );
      }
    }
    

    在main.dart增加list页面的引入

    import 'list.dart';
    

    修改Home页的按钮事件,增加Navigator.push跳转

    FlatButton(
              color: Colors.blue,textColor: Colors.white,
              onPressed: () {    
                           Navigator.push(context, MaterialPageRoute(builder:(context) {
                                    return  ListPage();
                           }));
                  },
               child: Text("Click ME",style: TextStyle(fontSize: 20.0) ),
        )
    

    核心方法就是:

    Navigator.push(context,MaterialPageRoute)

    跳转示例:

    640?wx_fmt=gif


    6.2 更多页面跳转使用路由表

    在MaterialApp中,有一个属性是routes,我们可以对路由进行命名,这样跳转的时候,只需要使用对应的路由名字即可,如:Navigator.pushNamed(context, RouterName)。点击两个不同的按钮,分别跳转到ListPage,和Page2去。

    Main.dart修改一下如下

    import 'package:flutter/material.dart';
    import 'list.dart';
    import 'page2.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          //路由表定义
          routes:{
            "ListPage":(context)=> ListPage(),
            "Page2":(context)=> Page2(),
          },
          home: MyHomePage(),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget{
      @override
      MyHomePageState createState() => MyHomePageState();
    }
    
    class MyHomePageState extends State<MyHomePage>{
       @override
       Widget build(BuildContext context) {
           return Scaffold(
                appBar: AppBar(
                  title: Text("我是Title"),
                ),
                body: Center(
                          child:Column(
                                  children:<Widget>[
                                      RaisedButton(
                                          child: Text("Clikc to ListPage" ),
                                          onPressed: () {
                                            //根据命名路由做跳转
                                             Navigator.pushNamed(context, "ListPage");
                                          },
                                      ),
                                       RaisedButton(
                                          child: Text("Click to Page2" ),
                                          onPressed: () {
                                              //根据命名路由做跳转
                                             Navigator.pushNamed(context, "Page2");
                                          },
                                      )
    
                                  ]
                          )
                      )
          );
      }  
    
    }
    

    示例:

    640?wx_fmt=gif

    当我们有了路由以后,就可以开始在一个项目里用不同的页面,去学习不同的功能了。

    6.3 路由传参

    列表页跳转到详情页,需要路由传参,这个在flutter体系里,又是怎么做的呢?

    首先,在main.dart里,增加详情页DedailPage的路由配置

    //路由表定义
          routes:{
            "ListPage":(context)=> ListPage(),
            "Page2":(context)=> Page2(),
            "DetailPage":(context)=> DetailPage(), //增加详情页的路由配置
          },
    

    并修改ListPage里ListTile的点击事件,增加路由跳转传参,这里是将整个item数据对象传递

    ListTile( 
              title: Text(item["title"],style: TextStyle(fontSize: 18.0) ),
              subtitle: Text(item["subtitle"]),
              leading:  Icon( Icons.fastfood, color:Colors.orange ),
              trailing: Icon(Icons.keyboard_arrow_right),
              onTap:(){
                //点击的时候,进行路由跳转传参
                 Navigator.pushNamed(context, "DetailPage", arguments:item);
              },
          )
    

    详情页DetailPage里,获取传参并显示

    import 'package:flutter/material.dart';
    class DetailPage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
         //获取路由传参
         final Map args = ModalRoute.of(context).settings.arguments;
    
        return Scaffold(
          appBar: AppBar(
            title: Text("Detail Page"),
          ),
          body: 
            new Column(
              children: <Widget>[
                 Text("我是Detail页面"),
                 Text("id:${args['id']}" ),
                 Text("id:${args['title']}"),
                 Text("id:${args['subtitle']}")
              ],
            )
          );
      }
    }
    

    Demo效果:

    640?wx_fmt=gif


    7.widget

    Flutter提供了很多默认的组件,而每个组件的都继承自widget 。在Flutter眼里:一切都是widget。这句看起来是不是很熟悉?还记得在webpack里,一切都是module吗?类似的还有java的一切都是对象。貌似任何一个技术,最后都是用哲学作为指导思想。

    widget,作为可视化的UI组件,包含了显示UI、功能交互两部分。大的widget,也可以由多个小的widget组合而成。

    常用的widget组件:

    7.1 Text

    Demo:

    Text(
             "Hello world",
             style: TextStyle(
                          fontSize: 50,
                          fontWeight: FontWeight.bold,
                          color:Color(0xFF0000ff)
                      )
        ),
    

    Text的样式,来自另一个widget:TextStyle。而TextStyle里的color,又是另一个widget Color的实例。

    如果用flutter的缩进的方法,看起来确实有点丑陋,习惯写CSS的前端同学,可以看看下面的风格:

    Text( "Hello world", style: TextStyle( fontSize: 50,fontWeight: FontWeight.bold,color:Color(0xFF0000ff) ) )
    

    写成一行,是不是就顺眼多了?这算前端恶习吗?^_^

    640?wx_fmt=png


    7.2 Button

    对于flutter来说,Button就提供了很多种,我们来看看他们的区别:

    RaisedButton: 凸起的按钮

    FlatButton:扁平化按钮

    OutlineButton:带边框按钮

    IconButton:带图标按钮

    按钮测试页dart:

    import 'package:flutter/material.dart';
    
    class ButtonPage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
    
        return Scaffold(
          appBar: AppBar(
            title: Text("Button Page"),
          ),
          body: Column(
            children: <Widget>[
                 RaisedButton(
                      child: Text("我是 RaiseButton" ),
                      onPressed: () {},
                  ),
                   FlatButton(
                      child: Text("我是 FlatButton" ),
                      color: Colors.blue,
                      onPressed: () {},
                  ),
                  OutlineButton(
                      child: Text("我是 OutlineButton" ),
                      textColor: Colors.blue,
                      onPressed: () {},
                  ),
                  IconButton(
                      icon: Icon(Icons.add),
                      onPressed: () {},
                  )  
            ]
          )
        );
      }
    }
    

    Demo:

    640?wx_fmt=png

    项目中要用哪个,就各取所需吧~

    7.3 Container

    Container是非常常用的一个widget,他一般是用作一个容器。我们先来看看他的基础属性,顺便可以想想他像HTML里的啥?

    基础属性:width,height,color,child

    body: Center(
            child: Container(
               color: Colors.blue,
               width: 200,
               height: 200,
               child: Text("Hello Container ",style:TextStyle(fontSize: 20,color: Colors.white)),
            )
          )
    
    640?wx_fmt=png

    Padding

    我们也可以不设置宽高,用padding在内部撑开增加留白:

    Container(
               color: Colors.blue,
               padding: EdgeInsets.all(30),
               child: Text("Hello Container ",style:TextStyle(fontSize: 20,color: Colors.white)),
    
            )
    

    640?wx_fmt=png


    Margin

    我们还可以使用margin,在容器的外部撑开增加偏移量,

    Container(
               color: Colors.blue,
               padding: EdgeInsets.all(30),
               margin: EdgeInsets.only(left: 150,top: 0,right: 0,bottom: 0),
               child: Text("Hello Container ",style:TextStyle(fontSize: 20,color: Colors.white)),
            )
    
    640?wx_fmt=png

    Transform

    我们还可以给这个矩形,使用tansform做一些变化,比如,旋转一个角度

    Container(
               color: Colors.blue,
               padding: EdgeInsets.all(30),
               child: Text("Hello Container ",style:TextStyle(fontSize: 20,color: Colors.white)),
               transform: Matrix4.rotationZ(0.5)
            )
    
    640?wx_fmt=png

    看到这里,好多前端同学要说了,好熟悉啊。对,他就是很像Html里的一个东西:DIV,你确实可以对应的去加强理解。


    7.4 Image

    网络图片加载

    使用NetworkImage,可以做网络图片的加载:

    child:Image(
              image: NetworkImage("https://mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/qq_logo_2x.png"),
               width: 200.0,
            )  
    
    640?wx_fmt=png

    本地图片加载

    加载本地图片,就稍微复杂一些,首先要把图片的路径配置,加入到之前说过的pubspec.yaml配置文件里去。

    640?wx_fmt=png


    加载本地图片时使用AssetImage:

    child:Image(
                   image: AssetImage("assets/images/logo.png"),
                    width: 200.0,
                )      
    

    也可以使用简写:

     Image.asset("assets/images/logo.png",width:200.0)
    

    flutter提供的组件很多,这里就不一一举例说明,有兴趣的还是建议大家去看API:https://api.flutter.dev/


    8.布局

    我们已经了解了这么多组件,那么怎么绘制一个完整的页面呢?这就到了页面布局的部分了。

    8.1 Row & Column & Center 行列轴布局

    字面意义也很好理解,行布局、列布局、居中布局,这些布局对于Flutter来说,也都是一个个的widget。

    区别在于,row、column 是有多个children的widget, 而Center是只有 1个child的 widget。

     Row(
         children:<Widget>[]
     ) 
    
     Column(
         children:<Widget>[]
     )    
    
     Center(
          child:Text("Hello")
     )
    


    8.2 Align 角定位布局

    我们常常在Container里,需要显示的内容在左上角,左下角,右上角,右下角。在html时代,使用CSS可以很容易的实现,但是flutter里,必须依赖Align 这个定位的Widget

    右下角定位示例:

     child: Container(
               color: Colors.blue,
               width: 300,
               height: 200,
               child: Align(
                          alignment: Alignment.bottomRight,
                          child:Text("Hello Align ",style:TextStyle(fontSize: 20,color: Colors.white)),
                      )
            )
    

    显示效果:

    640?wx_fmt=png

    Alignment提供了多种定位供选择,还算是很贴心的。

    640?wx_fmt=png


    8.3 Stack & Positioned 绝对定位

    当然还有绝对定位的需求,这在css里,使用position:absolute就搞定了,但是在flutter里,需要借助stack+ positioned两个widget一起组合使用。

    Stack: 支持元素堆叠

    Positioned:支持绝对定位

    child:Stack(
                  children: <Widget>[
                      Image.network("https://ossweb-img.qq.com/upload/adw/image/20191022/627bdf586e0de8a29d5a48b86700a790.jpeg"),
                      Positioned(
                        top: 20,
                        right: 10,
                        child:Image.asset("assets/images/logo.png",width:200.0)
                      )
                  ],
                )
    
    640?wx_fmt=png


    8.4 Flex & Expanded 流式布局

    Flex流式布局作为前端同学都熟悉,之前讲过的Row,Column,其实都是继承自Flex,也属于流式布局。

    如果轴向不确定,使用Flex,通过修改direction的值设定轴向

    如果轴向已确定,使用Row,Column,布局更简洁,更有语义化

    Flex测试页:

    class FlexPage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
    
        return Scaffold(
          appBar: AppBar(
            title: Text("Flex Page"),
          ),
          body:  Flex(
              direction: Axis.horizontal,
              children: <Widget>[
                Container(
                  width: 30,
                  height: 100,
                  color: Colors.blue,
                ),
                Expanded(
                  flex: 1,
                  child: Container(
                    height: 100.0,
                    color: Colors.red,
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Container(
                    height: 100.0,
                    color: Colors.green,
                  ),
                ),
              ],
            ),
        );
      }
    }
    

    示例中,轴向横向排列,最左边一个固定宽度的Container,右边两个Expanded,各自占剩下的宽度的一半。

    640?wx_fmt=png


    9.动画

    Flutter既然说了,一切都是Widget,包括动画实现,也是一个Widget。我们还是看一个示例

    9.1 简单动画:淡入淡出:

    使用flutter提供的现成的Widget:

    import 'package:flutter/material.dart';
    
    class AnimatePage extends StatefulWidget {
      _AnimatePage  createState()=> _AnimatePage();
    } 
    
    class _AnimatePage extends State<AnimatePage> {
      bool _visible=true;
      @override
      Widget build(BuildContext context) {
    
        return Scaffold(
          appBar: AppBar(
            title: Text("Animate Page"),
          ),
          body: 
              Center(
    
                child: Column(
                      children: <Widget>[
                          AnimatedOpacity(
                            opacity: _visible ? 1.0:0.0,
                            duration: Duration(milliseconds: 1000),
                            child: Image.asset("assets/images/logo.png"),
                          ),
    
                          RaisedButton(
                            child: Text("显示隐藏"),
                            onPressed: (){
                              setState(() {
                                _visible=!_visible;
                              });
                             },
                          ),
    
                      ],
                    ),
              )    
          );
    
      }
    }
    

    其中的AnimatedOpacity就是动画透明度变化的的Widget,而被透明度控制变化的Image则是AnimatedOpacity的子元素。这个和以往前端写动画的方式,就完全不一样了,需要改变一下思维方式。

    Demo效果

    640?wx_fmt=gif


    9.2 复杂一些的动画:放大缩小

    当写复杂一些动画的时候,没有对应的widget组件,就需要自己使用Animation,和AnimationController,以及Tween来组合。

    Animation: 保存动画的值和状态

    AnimationController: 控制动画,包含:启动forward()、停止stop()、反向播放reverse()等方法

    Tween: 提供begin,end作为动画变化的取值范围

    Curve:设置动画使用曲线变化,如非匀速动画,先加速,后减速等的设定。

    动画示例:

    class AnimatePage2 extends StatefulWidget {
      _AnimatePage  createState()=> _AnimatePage();
    } 
    
    class _AnimatePage extends State<AnimatePage2>  with SingleTickerProviderStateMixin {
    
      Animation<double> animation;
      AnimationController controller;
    
      initState() {
        super.initState();
        controller =  AnimationController(duration:  Duration(seconds: 3), vsync: this);
    
         //使用弹性曲线,数据变化从0到300
         animation = CurvedAnimation(parent: controller, curve: Curves.bounceIn);
         animation = Tween(begin: 0.0, end: 300.0).animate(animation)
          ..addListener(() {
            setState(() {
            });
          });
    
    
        //启动动画(正向执行)
        controller.forward();
      }
    
      @override
      Widget build(BuildContext context) {
    
        return Scaffold(
          appBar: AppBar(
            title: Text("Animate Page"),
          ),
          body: 
              Center(
                  child: Image.asset(
                      "assets/images/logo.png",
                      width: animation.value, 
                      height: animation.value
                  ),
                )  
          );   
      }
    
      dispose() {
        //路由销毁时需要释放动画资源
        controller.dispose();
        super.dispose();
      }
    
    }
    

    很重要的一点,在路由销毁的时候,需要释放动画资源,否则容易导致内存泄漏

    显示Demo:

    640?wx_fmt=gif


    10.http请求

    做业务逻辑,总离不开http请求,接下来,就来看下flutter的http请求是如何做的。

    10.1 HttpClient

    httpClient在 dart:io库中,不需要引入第三方库就可以使用,示例代码如下:

    使用示例

    import 'dart:convert';
    import 'dart:io';
    
    Future _getByHttpClient() async{
        //接口地址
        const url="https://www.demo.com/api";
    
        //定义httpClient
        HttpClient client = new HttpClient();
        //定义request
        HttpClientRequest request = await client.getUrl(Uri.parse(url));
        //定义reponse
        HttpClientResponse response = await request.close();
        //respinse返回的数据,是字符串
        String responseBody = await response.transform(utf8.decoder).join();
        //关闭httpClient
        client.close();
        //字符串需要转化为JSON
        var json= jsonDecode(responseBody);
        return json;
    
    } 
    

    总的看起来,代码还是挺繁琐的,使用起来并不方便。

    10.2 http

    这是Dart.dev提供的第三方类库,地址:https://pub.dev/packages/http

    需要先在pubspec.yaml里添加类库应用

    dependencies:
      flutter:
        sdk: flutter
      json_annotation: ^2.0.0
      http: ^0.12.0+2
    

    使用示例:

    Future _getByDartHttp() async {
      // 接口地址
     const url="https://www.demo.com/api";//获取接口的返回值
     final response = await http.get(url);
     //接口的返回值转化为JSON
     var json = jsonDecode(response.body); 
     return json;
    }
    

    这种写法,比上面的httpClient简洁了许多。

    10.3 Dio

    国内使用最广泛的,还是flutterchina在github上提供的Dio第三方库,目前Star达到了5800多个。

    官网地址:https://github.com/flutterchina/dio

    使用Dio,因为是第三方库,所以同样要先在 pubspec.yaml 添加第三方库引用。

    dependencies:
      flutter:
        sdk: flutter
      json_annotation: ^2.0.0
      dio: 2.1.16
    

    使用示例:

    import 'package:dio/dio.dart';
    
    Future _getByDio() async{
    
          // 接口地址
          const url="https://www.demo.com/api";
    
          //定义 Dio实例
          Dio dio = new Dio();
          //获取dio返回的Response
          Response response = await dio.get(url);
          //返回值转化为JSON
          var json=jsonDecode(response.data);
          return json;
    }
    

    接口调用也是比httpclient简单很多,可能由于fluterchina在他的官方教程里,极力推荐这个dio库,所以目前这个第三方库的使用情况最为广泛。和Dart.dev的http不同的是,他需要new一个Dio的实例,在创建实例的时候,还可以传入更多的扩展配置参数。

    BaseOptions options = new BaseOptions(
        baseUrl: "https://www.xx.com/api",
        connectTimeout: 5000,
        receiveTimeout: 3000,
    );
    Dio dio = new Dio(options);
    


    11.吐吐槽

    学习Flutter的过程中,其实还是有很多坎坷和需要吐槽的地方。

    11.1 墙

    因为有墙在,所以在配置flutter,或者下载flutter插件和第三方库的时候,需要墙内外来回切换。

    11.2 组件过度设计

    提供的各种widget组件很多,但是真正核心的组件、常用的组件,也就哪些。比如Flex 和column、row的关系,比如,Tween 与IntTween,ColorTween,SizeTween等20多个Tween子类之间的关系,你需要花很大的精力,去看每个具体子类的实现差别。

    11.3 嵌套太多不适应

    因为嵌套层级很多,而且布局、动画、功能都在一起,第一次上手Flutter和Dart,这种嵌套关系让人很晕菜,这个只能去慢慢克服。另外,多开发自定义的组件,可以让嵌套关系看起来清晰一些。

    11.4 布局修改会导致嵌套关系修改

    前端的html+css分离世界里,不改变嵌套关系,修改CSS就可以调整布局。但是在Flutter里因为布局也是嵌套关系,这就导致必须去改变嵌套关系。要让嵌套更简单变动影响更小,页面拆分成子组件变得尤为重要。

    11.5 Dart语言升级

    没错,语言升级也会导致学习的困扰,外面的资料新旧都有,比如有些是 new Text() ,有些直接是Text() ,新手上路会很晕菜。其实这都是Dart语言升级导致的,记住Dart升级2.X以后,都不使用new了。感兴趣的可以自己去看下Dart的升级变更说明。

    11.6 不能热更新

    年中的时候,Google官方宣布flutter暂不官方支持热更新,但是闲鱼团队已经有了自己的热更新方案。关于热更新,只能静观其变了。性能、开发效率、热更新,总是要有取舍的。即使是闲鱼团队,热更新也是付出了一点点性能下降的代价的,这是你选择flutter的初衷吗?还是那句话:权衡得失。


    12.结语

    这不是一篇教程,只是自己在学习Flutter过程中的一点体验和经历,也因为时间关系,研究并不深入,如有疏漏,还请不吝赐教。

    随着Flutter1.9的发布,以及flutter for web的发布,Flutter的组件化思路,使得一份代码跨三端变成可能,相信Flutter的未来会更加广阔,也欢迎大家一起交流Flutter。

    640?wx_fmt=gif

    展开全文
  • Flutter入门

    2020-03-16 14:37:43
    本文真对 Flutter 的技术特性,做了一些略全面的入门级的介绍,如果你听说过Flutter,想去了解它,但是又不想去翻厚厚的API,那么本文就是为你准备的。 随着纯客户端到Hybrid技术,到RN&Weex,再到如今的...
  • 原文作者:腾讯技术 ...来源:知乎 本文真对 Flutter 的技术特性,做了一些略全面的入门级的介绍,如果你听说过Flutter,想去了解它,但是又不想去翻厚厚的API,那么本文就是为你准备的。 随着纯客户端到Hybrid技术,...
  • 原文作者:腾讯技术 ...来源:知乎 本文针对 Flutter 的技术特性,做了一些略全面的入门级的介绍,如果你听说过Flutter,想去了解它,但是又不想去翻厚厚的API,那么本文就是为你准备的。 随着纯客户端到Hybrid技术,...
1
收藏数 7
精华内容 2
关键字:

11.2顶部留白 ios