关于ios:八天让iOS开发者上手Flutter一

flutter当初是越来越火了,当初作为一个iOS开发,如果你不会flutter都如同不算个正常人似的?而且当初的flutter状况,有点像2012年那会儿刚刚衰亡的iOS,Android开发一样,会点皮毛UI就能够晋升不少身价…这些年过去,有有数的前端跨平台框架衰亡。却只有flutter一家独秀,阐明它还是有两把刷子的。明天这篇文章内容是基于Mac和Android Studio根底来开发flutter的,如果你还没有配置好开发环境,能够在网上搜寻,或者间接到官网装置。这篇文章次要用来记录我学习flutter的过程,如果你也对flutter感兴趣能够跟着一起练习。

配置好Flutter环境之后,开始创立咱们的第一个Flutter工程

创立第一个Flutter工程

关上iTerm2,cd到~/AndroidStudioProjects目录,输出以下命令,没有iTerms的应用Mac零碎自带的Terminal也行。
flutter create flutter_demo
这里须要留神,AndroidStudio项目名称不能应用大写字母,这里举荐应用小写字母加下划线给工程命名。

关上对应的目录,能够看到新建了一个flutter_demo目录

接下来,cd到flutter_demo目录,在终端输出flutter run命令,它就会运行我的项目,如果你电脑连贯了真机,就会主动运行到真机上,没有真机会去寻找模拟器并运行,模拟器也没有,就会关上一个Chrome网页运行我的项目(flutter我的项目目前能够运行在iOS,Android,web上)。我这里连上了iPhone真机,运行我的项目会报一个BUILD FAILED的谬误:

起因是flutter_demo我的项目生成的iOS我的项目默认的bundle identifier咱们用不了,去iOS我的项目外面批改一下就好了

这里留神咱们收费的开发者证书,在iPhone上最多装置3个开发中的APP,多了就装置不了,删掉之前的APP就好了,再次运行flutter run

能够看到这里给出了flutter运行的一些要害命令,Hot reload热重载,这个个性对咱们开发UI时还是比原生的体验好不少的,它不必咱们从新运行我的项目就能看到UI的一些扭转。Hot restart热重启,意思不必退出APP,就间接从新运行了。此时真机上就关上了咱们的第一个flutter工程的APP

HelloFlutter

下面是通过命令创立一个flutter我的项目,当然在理论开发过程我,咱们个别不会这么操作。应用Android Studio来创立flutter我的项目。没有这个选项的同学,在Android Studio的插件外面抉择flutter并装置就有了,如果提醒还须要装置Dart就一块装置了,flutter应用的是Dart语言。iOS开发者没必要被这个新语言给吓到了,古代的语言根本都差不了太多,敲着敲着就相熟了

点击后会呈现以下界面,目前咱们抉择Flutter App就好了

下一个界面会让咱们设置工程名称,工程地位,工程形容,工程组织,Android语言,iOS语言等等…我这里设置工程名称为hello_flutter,其余的默认抉择就好了…也能够依据你本人的须要抉择

点击Finish之后就能够看到残缺的工程目录了,flutter工程的主入口,跟咱们iOS我的项目一样有一个main.m文件,flutter的是main.dart文件,能够看到这个文件外面曾经有不少初始的代码了,明天是咱们第一次接触flutter我的项目,就不要这里的代码,全副删掉,咱们从第一行代码开始本人敲进去

  • 导入material.dart头文件(相当于iOS中UIKit)
  • 写一个main()函数作为主入口
  • 调用runAPP()函数
  • Center类是用来布局的类,示意一个地位,child属性示意他有的子控件的意思。Text类就是咱们文本类,有点儿咱们iOS的UILabel的意思,Text类的第一个参数就是具体的文本,省略了参数名,第二个参数textDirection示意文本显示方向,咱们习惯的从左至右就是TextDirection.ltr,left to right。像一些阿拉伯语言,希伯来语的文字就是从右到左显示的,我这里试了一下hello world的方向并没有变动,可能还须要其余设置吧…

首先作为一个开发者,有一个学习的气氛跟一个交换圈子特地重要,这是一个我的iOS开发公众号:编程大鑫,不论你是小白还是大牛都欢送入驻 ,让咱们一起提高,独特倒退!(群内会收费提供一些群主珍藏的收费学习书籍材料以及整顿好的几百道面试题和答案文档!)

运行之后iPhone显示如下:

自定义Widget

flutter外面的Widget类叫作小部件,是flutter外面常常用到的,它分为有状态的Stateful和Stateless无状态的。其中无状态的比较简单,咱们先自定义一个类CustomWidget继承自StatelessWidget。咱们自定义的Widget想要显示到屏幕上须要实现一个build的函数,零碎会调用这个函数来渲染咱们想要显示到屏幕上的内容

这个时候,如何将咱们的hello flutter显示到屏幕呢,能够看到runApp函数外面有一个Center类,咱们CustomWidget类的build办法也是返回的一个Center类,所以能够间接将咱们CustomWidget初始化给runApp作参数

有些时候,咱们发现hot reload无奈更新界面,能够应用hot restart,如果hot restart还是无奈更新界面,那就须要从新运行一下就能够了。此时咱们发现main()函数外面就只有一句调用runApp()代码,在Dart语言中,函数定义如果只有一句代码,那么能够省略成如下箭头模式

设置文字款式style

按住command再用鼠标左键点击Text类,就会跳到一个text.dart文件,会看到一个this.style属性,再次按住command点击,会来到style的申明局部:

这里的final示意不可变,常量的意思,相似于Swift外面的let。能够看到style是一个TextStyle类型,查看TextStyle类,会发现外面很多的属性,比方color,backgroundColor,fontSize,fontWeight…这些都是很相熟的属性,接下来咱们设置一下hello flutter的一些文字款式

应用Android Studio快捷键command + \查看界面

Material App

在flutter提供的头文件material.dart中,提供了一个疾速构建APP的类型MaterialApp,咱们能够应用它来疾速构建一个APP的根底框架。
咱们先新建一个App类来写咱们的代码

而后咱们在App的build办法中,返回一个MaterialApp类,如果MaterialApp不传入任何参数的话,运行后会发现APP整个屏幕变成红色,并且显示了一行文字,意思是出错了之类的,阐明咱们的MaterialApp应该是须要传入一个必要的参数的。

没错就像咱们iOS的APP同样须要一个rootViewController一样,MaterialApp函数须要一个home参数,home参数能够传一个Widget类,如果传入咱们刚刚写的CustomWidget类,运行后发现有了一点不一样的中央

右上角有一个debug的图标,hello flutter上面也呈现了两条横线。

flutter还提供了一个Scaffold的类,这个类翻译过去叫作脚手架,有点像是咱们iOS中的一些根底控制器(比方UITabBarController,UINavigationController)的封装。咱们来应用一下这个类,这个Scaffold类有一个appBar的属性,这个属性就跟咱们的UINavigationController的UINavigationBar一样,appBar是一个AppBar类型,它的title属性能够传入一个Widget,咱们传入一个Text类试试看。Scaffold类除了appBar属性,还有一个body属性示意的内容,把这个body设置为咱们刚刚的CustomWidget,看看是什么成果,代码如下:

APP上显示成果:

这个时候,是不是发现像那么回事了

MaterialApp还有一个theme的属性,这个属性用了配置app的主题,设置一下主题颜色代码如下:

APP上显示成果:

初探ListView

在摸索ListView之前,咱们先把模型实现一下,咱们这里展现的一组对于汽车的图片和名字,就定义一个Car类,咱们新建一个car文件用来寄存咱们的模型代码,代码如下:

再定义一个数组,用来寄存一组汽车模型,我这里放了一组网络图片,你能够间接应用,也能够本人在网上找几张图片,填入模型数组中

final List<Car> cars = [
  Car(
    name: '保时捷918 Spyder',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-7d8be6ebc4c7c95b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: '兰博基尼Aventador',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-e3bfd824f30afaac?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: '法拉利Enzo',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-a1d64cf5da2d9d99?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: 'Zenvo ST1',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-bf883b46690f93ce?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: '迈凯伦F1',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-5a7b5550a19b8342?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: '萨林S7',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-2e128d18144ad5b8?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: '科尼赛克CCR',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-01ced8f6f95219ec?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: '布加迪Chiron',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-7fc8359eb61adac0?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: '轩尼诗Venom GT',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-d332bf510d61bbc2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: '西贝尔Tuatara',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-3dd9a70b25ae6bc9?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  )
];

而后回到main.dart文件新建一个Home类,用来寄存咱们ListView相干代码,和Xcode一样Android Studio同样有代码块性能,间接输出stl就会呈现提醒,回车就会生成StatelessWidget类相干代码。咱们将Scaffold相干的代码挪到Home中来。

接下来就是正式开始应用ListView了,ListView跟其余个别的类不太一样,它的初始化须要调用build办法,并且传入两个参数,一个是itemCount,一个是itemBuilder,有点相似咱们UITableView的cellForRow办法,只不过咱们UITableView应用的是代理的设计,而这里的ListView应用的代码块回调的设计。

这里说一个Android Studio的比Xcode好用的中央,如图的itemCount应用了cars.length然而提醒cars报错,是因为没有导入car.dart文件,给了个小红灯泡。这个时候,咱们光标挪动到Car类上,而后应用option + 回车会弹出一个菜单,再按一次回车就能够导入咱们的car.dart文件了

itemBuilder属性就是一个代码块,用来配置每个item的款式,咱们能够先对立返回一个Text文本看看成果。

显示成果就是相似于tableView一样的一行行的文本

接下来介绍一个相似于UIView的容器类Container,它跟UIView相似,能够设置一些色彩,间距,子控件之类的,咱们来试一下,将Text改为Container,child属性就是子控件的意思,再给child设置为Text,文本就是cars外面的name,代码如下:

再看一下显示成果

那么如果咱们当初想要显示图片加文字的话应该怎么做呢?这里再介绍一个Column类,和后面介绍Center类相似,同样是属于布局的类,Column示意高低的布局,因为咱们想把图片和文字高低摆放,所以须要用到Column这个类。而后对于图片的显示,这里咱们先不讲怎么去网络申请,而是间接应用Image类提供的一个办法去加载网络图片,代码如图:

显示成果如图:

这个时候,你应该也猜到了,如果移动children外面Text和Image和程序,会发现图片和文字的程序就替换了,是不是很容易了解。如果想要调整图片和文字之间的间距怎么调呢,应用SizedBox类,传一个height就能够调整间距了,也能够持续应用Container,代码如下:

如果感觉itemBuilder的代码太长,也能够将它的代码封装到一个办法外面,例如我这里应用iOS中的_cellForRow来命名这个办法。应用下划线的意义的是示意这是一个公有办法。

APP右上角会发现有一个debug图标,这个图标的显示在MaterialApp类外面有一个属性能够管制显示暗藏。 debugShowCheckedModeBanner: false

罕用Widget介绍

在介绍罕用Widget之前,咱们想把刚刚写的ListView相干代码,封装到一个文件内,这样不便当前咱们回头学习。listView_demo代码如下:

这个时候,main.dart文件内的Home类的build办法里,返回咱们的ListViewDemo初始化办法就行了。

而后再新建一个新的base_widget文件,用来寄存咱们将要介绍的根底Widget代码。

能够在main.dart文件中间接应用我的BaseWidgetDemo初始化办法,这样咱们就不须要再去main.dart文件批改代码了。每介绍一个新Widget间接批改BaseWidgetDemo的build办法返回值为咱们的自定义类xxxDemo()就好了

第一个介绍是Text

Text

Text咱们一开始讲过了,这里就再讲一点对于字符串相干的,如果须要拼接字符串能够应用$符号,如果字符串中有特殊符号,那就应用${}。其余Text罕用的属性,跟咱们iOS中都差不太多,须要留神的是Text的款式,是在style外面设置的。上面看一下APP显示的成果

RichText

RichText就是富文本,它的text属性能够传一个TextSpan的类,这个TextSpan类能够设置text文本,设置style款式,还能够设置children子控件,这样就能够有限加花色拼接各种字符串在一起,代码如下

APP上显示的成果:

Container,Row

Container是个容器,Row是个用于布局的类,跟Column,Center相似,依据代码查看一下APP的显示,就能大略明确意思了,代码如下:

APP显示如下:

总结

明天介绍了Flutter外面的许多的根底Widget,有用于布局的Center,Row,Column…有用于显示文本的Text,RichText,TextSpan…有列表展现ListView,有基础架构Scaffold,MaterialApp类,尽管货色有点多,但根本还没有什么难以了解的内容。

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年99元

阿里云限时活动-1核2G-1M带宽-40-100G ,特惠价87.12元/年(原价1234.2元/年,可以直接买3年),速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

You may also like...

发表评论

邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据