Flutter 完整开发实战详解系列

所需积分/C币:48 2019-06-08 12:36:08 4.39MB PDF
50
收藏 收藏
举报

Flutter 完整开发实战详解系列
Dar语言和 Flutter基础 前言 在如今的 Fultter大潮下,本系列是让你看完会安心的文章。 本系列将完整讲述∶如何怏速从0开发一个完整的 Flutter APp,配套高完成度 Flutter开源项目 GSYGithubAppFlutter,同时也会提供一些 Flutter.的开发细节技巧.并针对开发过程中可能遇到的问题 进行填坑,之后深入源码和实战为你全面解析 Flutter 笔者相继开发过 Flutter、 React Native、Weex等主流跨平台框架项目,其中 Flutter的跨平台兼 容性无疑最好。前期开发调试完全在 Android端进行的情况下,第一次在lOS平台运行居然没有 任何错误,并且还没出现U兼容问题,相信对于经历过跨平台开发的猿们而言,这是多么的不可 思议画面。并且 Fluster的 Hotload相比较其他两个平台,也是丝滑的让人无法相信。吹爆了! 这些特点其实这得益于 Flutter Engine和ska,如果有兴趣的可以看看笔者之前的《移动端跨平 台开发的深度解析》 好了,感慨那么多,让我们进入正题吧。 、基础篇 本篇主要涉及:环境搭建、Dar语言、 Flutter的基础。 1、环境搭建 Flutter的环境搭建十分省心,特别对应 Android开发者而言,只是在 Android stuido上安装插件,并 下载 flutter sdk到本地,配置在环境变量即可,其实中文网的搭建 Futter开发环境巳经很贴心详细,从 平台指引开始安装基本都不会遇到问题。 这里主要是需要注意,因为某些不可抗力的原因,国内的用户有时候需要配置 Flutter的代理,并且国 內用户在搜索 Flutter第三方包时,也是在htps; pub. flutter-io.cn内查找,下方是需要配置到环境变 量的地址。( ps Android studio下运行oS也是蛮有意思的①) //win直接配置到环境编辑即可,mac配置到 bash_profile export Pub_HostEd_url=HttpS: //pub. flutter-io. cn //i国内用户需要设置 exportflUtteR_sToraGe_bAse_url=https://storage.flutter-io.cn//国内用户需要设置 2、Dart语言下的 Flutter 在跨平台开领域被JS一统天下的今天,Dart语言的岀现无疑是一股清流。作为后来者,Dart语言有着 不少Java、 kotlin和JS的影子,所以对于 Android原生开发者、前端开发者而言无疑是非常友好的 官方也提供了包括loS、 React native等开发者迁移到 Flutter上的文档,所以请不要担心,Dar语言 不会是你掌握 Flutter的门槛,甚至作为开发者,就算你不懂Dart也可以看着代码摸索。 Come on,下面主要通过对比,简单讲述下Dart的一些特性,主要涉及的是 Flutter下使用。 、Dar语言和 Flutter基础 21、基本类型 ·var可以定义变量,如 var tag="66”,这和Js、 Kotlin等语言类似,同时Dart也算半个 动态类型语言,同时支持闭包 ·Dart属于是强类型语言,但可以用var来声眀变量,Dart会自推导出数据类型,var 实际上是编译期的“语法糖"。 dynamic表示动态类型,被编译后,实际是一个σ bject类型, 在编译期间不进行任何的类型检査,而是在运行期进行类型检査。 Dar中 number类型分为int和 double,其中java中的long对应的也是Dat中的int类 型。Dart中没有foat类型。 ·Dart下只有bool型可以用于等判断,不同于Js这种使用方式是不合法的varg="nu1l"; if(gt ·DART中, switch支持 String类型。 22、变量 ·Dar不需要给变量设置 setter getter方法,这和 kotlin等类似。Dart中所有的基础类型、类 等都继承 Object,默认值是NULL,自带 getter和 setter,而如果是fna或者 const的话,那 么它只有一个 getter方法。 ·Dar中fna|和 const表示常量,比如 final name='GsY; const value=1060088;同时 static const组合代表了静态常量。其中 const的值在编译期确定, final的值要到运行时才确 定。( ps Flutter在 Release下是AOT模式。) ·Dart下的数值,在作为字符串使用时,是需要显式指定的。比如:inti=0; print("a"+ i);这样并不支持,需要 print("a"+i. tostring());这样使用。这和Java与Js存在 差异。所以在使用动态类型时,需要注意不要把 number类型当做 String使用。 ·DART中数组等于列表,所以var1ist=[];和 List list= new List()可以简单看做 样。 23、方法 Dat下??、??=属于操作符,如:A??"99表示如果AA为空,返回999;AA?? "999"表示如果AA为空,给AA设置成999 ·Dar方法可以设置参数默认值和指定名称。比如: getDetail( sting userName, reposName, branch=" master"})}方法,这里 branch不设置的话,默认是“ master"。参数类型可以指 定或者不指定。调用效果: getRepositoryDetaildao(“a","bb", branch:"dev") ·Dart不像Java,没有关键词 public、 private等修饰符,下横向直接代表 private,但是有 @ protected注解。 ·Dart中多构造函数,可以通过如下代码实现的。默认构造方法只能有一个,而通 过№odel. empty()方法可以创建一个空参数的类,其实方法名称随你喜欢。而变量初始化值 时,只需要通过this.name在构造方法中指定即可 、Dar语言和 Flutter基础 class ModelA i String name/ string tag; //默认构造方法,赋值给name和tag Modela(this name, this tag); //返回一个空的 Modela ModelA. empty (i //返回一个设置了name的 Modela ModelA. forName(this name) 2.4、F| utter Flutter中支持 async/ await。这一点和ES7很像,如下代码所示,只是定义的位置不同。同时异 步操作也和ES6中的 Promise很像,只是 Flutter中返回的是 Future对象,通过then可以执 行下一步。如果返回的还是 Future便可以then().then.()的流式操作了 //模拟等待两秒,返回0K request o async await Future delayed ( duration(seconds: 1))i return ok! ///得到"ok!"后,将"ok!"修改为" ok from request" dosome Thing ( async t string data await requestor data =ok from request; return data ///打印结果 render somei dosome Thing (. then ((value)t print(value)i ///输出 ok from request }); · Flutter中 setstate很有 React Native的既视感, Flutter中也是通过 state跨帧实现管理数据 状态的,这个后面会详细讲到。 · Flutter中—一切皆 Widget呈现,通过 build方法返回 Widget,这也是和 React native中,通过 render函数返回需要渲染的 component一样的模式。 · Stream对应的 async*/yed也可以用于异步,这个后面会说到。 、Dar语言和 Flutter基础 3、 Flutter Widget 在 Flutter中,一切的显示都是 Widget o Widget是一切的基础,作为响应式的渲染,类似MWM的 实现机制。 我们可以通过修改数据,再用 setstate设置数据, Flutter会自动通过绑定的数据更新 Widget。所 以你需要做的就是实现 Widget界面,并且和数据绑定起来 Widget分为有状态和无状态两种,在 Flutter中每个页面都是一帧,无状态就是保持在那一帧,而 有状态的 Widget当数据更新时,其实是绘制了新的 Widget,只是 State实现了跨咴的数据同步保 存 这里有个小Tp,当代码框里输入st1的时候,可以自动弹岀创建无状态控件的模板选项,而 输入stf的时,就会弹出创建有状态 Widget的模板选项。 代码格式化的时候,括号内外的逗号都会影响格式化时换行的位置。 如果觉得默认换行的线太短,可以在设置- Editor- Code Style-Dart-Wrapping and Braces-Hard wrap at设置你接受的数值 31、无状态 Stateless Widget 直接进入主题,下方代码是无状态 Widget的简单实现。 继承 Statelesswidget,通过 build方法返回一个布局好的控件。可能现在你还对 Flutter的内置控 件不熟悉, but don' worry, take is easy,后面我们就会详细介绍。这里你只需要知道,一个无状 态的 Widget就是这么简单。 Widget和 Widget之间通过chi1d:进行嵌套。其中有的 Widget只能有一个chid,比如下方的 Container;有的 Widget可以多个chd,也就是 children:,比如Coum布局。下方代码便 是 Container Widget嵌套了 Text Widget import package: flutter /material. dart; class DEMOWidget extends statelesswidget i final string text //数据可以通过构造方法传递进来 DEMOWidget(this text) @override Widget build(BuildContext context //这里返回你需要的控件 //这里末尾有没有的逗号,对于格式化代码而已是不一样的。 return Container( //白色背景 color: Colors, white 、Dar语言和 Flutter基础 //Dart语法中,??表示如果text为空,就返回尾号后的内容。 child:Text(text??"这就是无状态DMEO") 32、有状态 StatefulWidget 继续直插主题,如下代码,是有状态的 widget的简单实现。 你需要创建管理的是主要是 state,通过 State的 build方法去构建控件。在 State中,你可以 动态改变数据,这类似MVM实现,在 setstate之后,改变的数据会触发 Widget重新构建刷 新。而下方代码中,是通过延两秒之后,让文本显示为这就变了数值" 如下代码还可以看出, State中主要的声明周期有 initiate:初始化,理论上只有初始化一次,第二篇中会说特殊情况下。 · didchange Dependencies:在 initstate之后调用,此时可以获取其他 State · dispose:销毁,只会调用一次。 看到没, Flutter其实就是这么简单!你的关注点只要在:创建你的 Statelesswidget或者 Statefulwidget而已。你需要的就是在 build中堆积你的布局,然后把数据添加到 Widget中, 最后通过 setstate改变数据,从而实现画面变化。 import dart: async import package: flutter/material. dart class Demostatewidget extends Statefulwidget t final String text i ////通过构造方法传值 DemostateWidget(this text) ///主要是负责创建 state @ d Demostatewidgetstate createstateo=>_Demostatewidgetstate(text) class_DemostateWidgetstate extends State<DemostateWidget> t string text i Demostatewidgetstate(this text) @override void initstateoi //初始化,这个函数在生命周期中只调用一次 super. initstate(; ///定时2秒 Dar语言和 Flutter.基础 new Future delayed (const Duration( seconds: 1),(i tstate(o t text="这就变了数值 @ ///销毁 super dispose() @override void didchangeDependencieso i //在 anastate之后调 Called when a dependency of this[ state] object changes Iper. didChange Dependencies() @ d Widget build(Buildcontext context)t return container( ch1d:Text(text??"这就是有状态DMEO") 4、 Flutter布局 Flutter中拥有需要将近30种内置的布局 Widge,其中常用有 Container、 Padding、 Center、Flex、 Stack、尺oW、Coum、 Listview等,下面简单讲解它们的特性和使用。 类型 作用特点 只有一个子 Widget。默认充满,包含了 padding、 margIn、 color、宽高、 Container decoration等配置。 Padding 只有一个子 Widget。只用于设置 Padding,常用于嵌套 child,给chld设置 padding。 Center 只有一个子 Widget。只用于居中显示,常用于嵌套chld,给chid设置居中。 Stack 可以有多个子 Widget.子 Widget堆叠在一起。 Column 可以有多个子 Widget。垂直布局。 R 可以有多个子 Widget。水平布局。 Expanded只有一个子 Widget.。在Coum和Row中充满。 Listview 可以有多个子 Widget自己意会吧。 、Dar语言和 Flutter基础 · Container:最常用的默认布局!只能包含一个chid:,支持配置 padding, margin,coor宽 高 decoration(一般配置边框和阴影)等配置,在 Flutter中,不是所有的控件都有宽高、 padding、 margin、 color等属性,所以才会有 Padding、 Center等 Widget的存在。 new Container( ///四周10大小的 maring margin: EdgeInsets all(10.o) height: 120.0 width:500.⊙ ///透明黑色遮罩 decoration: new BoxDecoration( ///弧度为4.0 bor der Radius: bor derRadius all(Radius circular(4.0)), ///设置了 decoration的co1or,就不能设置 Container的 color ///边框 border: new Border. all(color: color(GsYcolors subTextcolor), width: o child: new Text( 666666))i · Colum、Row绝对是必备布局,横竖布局也是日常中最常见的场景。如下方所示,它们常用的 有这些属性配置:主轴方向是 start或 center等;副轴方向方向是stat或 center等; mainAxis size是充满最大尺寸,或者只根据子 Widget显示最小尺寸。 //主轴方向, column的竖向、Row我的横向 mainAxisAlignment: MainAxisAlignment start /默认是最大充满、还是根据chi1d显示最小大小 mainAxissize: MainAxissize, max //副轴方向, column的横向、Row我的竖向 crossAXisAlignment CrossAXisAlignment. center, · Expanded在 Column和RoW中代表着平均充满,当有两个存在的时候默认均分充满。同时页可 以设置f1ex属性决定比例。 new Column( ///主轴居中,即是竖直向居中 mainAxisAlignment: MainAXisAlignment center //大小按照最小显示 mainAxlSSize MainAxisSize. min, ///横向也居中 crossAXisAlignment CrossAXisAlignmentcenter children: <widget>[ ///f1ex默认为1 new Expanded(child: new Text( 1111),flex: 2) new Expanded(child: new Text( 2222)) 、Dar语言和 Flutter基础 接下来我们来写一个复杂一些的控件。首先我们创建一个私有方法_ getBot tem,返回一个 Expanded widget,因为后面我们需要将这个方法返回的 Widget在RoW下平均充满。 如代码中注释,布局内主要是现实一个居中的lcon图标和文本,中间间隔50的 padding: ///返回一个居中带图标和文本的Item getBottomItem(IconData icon, string text)i ///充满Row横向的布局 return new Expanded( flex: 1 ///居中显示 child: new Center( ///横向布局 child: new ROW( ///主轴居中,即是横向居中 mainAxisAlignment: MainAXisAlignment center ///大小按照最大充满 mainAXiSSIZe MainAXlsSiZe. max, ///竖向也居中 crossAXisAlignment CrossAXisAlignment. center, children: <Widget>l ///一个图标,大小16.0,灰色 new Icon Icon, size: 16.0 color: Colors. grey ///间隔 new Padding (padding: new EdgeInsets only (left: 5.0)), ///显示文本 new Text( text /设置字体样式:颜色灰色,字体大小14.0 style: new Textstyle(color: Colors. grey, fontsize: 14.0), //超过的省略为..,显示 overflow: Textoverflow ellipsis //最长一行 maxLines: 1 ★1000

...展开详情
试读 127P Flutter 完整开发实战详解系列
立即下载 低至0.43元/次 身份认证VIP会员低至7折
一个资源只可评论一次,评论内容不能少于5个字
您会向同学/朋友/同事推荐我们的CSDN下载吗?
谢谢参与!您的真实评价是我们改进的动力~
  • 领英

  • GitHub

  • 脉脉勋章

  • 签到新秀

  • 技术圈认证(专家版)

关注 私信
上传资源赚钱or赚积分
最新推荐
Flutter 完整开发实战详解系列 48积分/C币 立即下载
1/127
Flutter 完整开发实战详解系列第1页
Flutter 完整开发实战详解系列第2页
Flutter 完整开发实战详解系列第3页
Flutter 完整开发实战详解系列第4页
Flutter 完整开发实战详解系列第5页
Flutter 完整开发实战详解系列第6页
Flutter 完整开发实战详解系列第7页
Flutter 完整开发实战详解系列第8页
Flutter 完整开发实战详解系列第9页
Flutter 完整开发实战详解系列第10页
Flutter 完整开发实战详解系列第11页
Flutter 完整开发实战详解系列第12页
Flutter 完整开发实战详解系列第13页
Flutter 完整开发实战详解系列第14页
Flutter 完整开发实战详解系列第15页
Flutter 完整开发实战详解系列第16页
Flutter 完整开发实战详解系列第17页
Flutter 完整开发实战详解系列第18页
Flutter 完整开发实战详解系列第19页
Flutter 完整开发实战详解系列第20页

试读结束, 可继续阅读

48积分/C币 立即下载