Flutter开发 项目实战01

Flutter简介

2018年2月27日,在2018世界移动大会上,Google 发布了Flutter的第一个Beta版本。Flutter是 Google 用以帮助开发者在iOS和Android两个平台开发高质量原生应用的全新移动UI框架,类似于React Native、Weex可以实现跨平台开发。

Flutter特点

热重载(Hot Reload)利用Android Studio直接一个Ctrl+S就可以保存并重载,模拟器立马就可以看见效果,这一效果其实有点类似Android Studio的Instant Run借助可移植的GPU加速的渲染引擎以及高性能本地代码运行时以达到跨平台设备的高质量用户体验可扩展性很强:Flutter框架本身提供了丰富的Material Design和Cupertino(iOS-flavor)风格的控件,可自由扩展控件不受手机平台控件的限制

Flutter入门

做为一个iOS开发者个人认为Flutter更适合学习,因为其入门较快,相对Weex、React-Native更快入门,因为后者两个对前端知识要求较高,而我一个iOS开发者有点懵逼。环境搭建:Flutter环境搭建 根据命令行拉个文件到本机 再进行命令安装配置啥的,跟着一步步走即可。开发工具:我使用的Android Studio 非常方便,当然你也可以用VSCode 附图

image

Android Studio很Nice,但是我的小Mac Air有点受不了,每次一运行只能关掉其他应用滚烫的电脑。所以你可以选择VSCode,相对消耗较低。完美运行。

如何构建一个App

image

根据提示填入AppName,存储地儿及包名。了解一下Flutter的入口,iOS的话即为Appdelegate.m文件中,切换RootViewController即可,在这里也可以同样理解,main.dart相当于Appdelegate.m,也可以写一个RootViewController,相当于这里的RootIndex

image

RootIndex实现跟iOS差不多的思想,包含其他几个页面头文件,然后设置一下即可,就可以实现最基本的一个App了,然后接着就是实现UI即可。

image

到此,一个空的App已经可以运行了。


关于UI搭建

在iOS中很简单粗暴,直接设置控件的绝对位置,x,y的位置,宽高。还可以利用其他第三方库类似Mansoy来进行自适应的布局,也非常方便。但是在Flutter并不是这样。首先贴个布局的链接Flutter布局。咱们先看个简单的布局,在iOS里新建个UITableViewCell,咔咔的几下就写完了,但是在Flutter可能需要换种思路去实现了

image

首先要确认布局的方向,Column从上到下的布局,Row从左到右的布局,Container相当于iOS的类似UIView的控件,可以往里加子控件,例如输入框,文本,图片等。右边的代码为实现的结构。其中margin就是设置上下左右相对父控件的位置的。

Fluuter-TabBar

在iOS中控件中并没有这个,需要自己实现。iOS有第三方库类似TopTabBar

image

在AppBar中实现,在导航栏底部。


appBar:new AppBar(
title:new Text('关注', style:new TextStyle(fontSize:17.0, color: Colors.black),),
centerTitle:false,
backgroundColor: Colors.white,
actions: [
new Row(
children: [
new Container(
child:new FlatButton(onPressed: (){}, child:new Icon(Icons.people)),
width:44.0,
),
new Container(
child:new FlatButton(onPressed: (){}, child:new Icon(Icons.search)),
width:64.0,
),
],
)
],
bottom:new TabBar(
tabs:myTabs,
unselectedLabelColor: Colors.grey,
labelColor: Colors.white,
indicatorSize: TabBarIndicatorSize.tab,
//              indicatorWeight: 15.0,
             indicator:new ShapeDecoration(
color: Colors.orange,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(0.0),
),
),
),
controller:_tabController,
isScrollable:true,
),
)


实现视图

body:new TabBarView(
controller:_tabController,
children:myTabs.map((Tab tab) {
if(tab.text =="全部关注"){
return new Container(
child:new ListView.builder(
itemCount:likeLists.length,
itemBuilder: buildCellItem,
),
);
}else if(tab.text =="简友圈"){
return new Center(child:new Text(tab.text));
}else if(tab.text =="专题"){
return new Center(child:new Text(tab.text));
}else if(tab.text =="作者"){
return new Center(child:new Text(tab.text));
}else if(tab.text =="连载"){
return new Center(child:new Text(tab.text));
}else if(tab.text =="文集"){
return new Center(child:new Text(tab.text));
}
return new Center(child:new Text(tab.text));
}).toList(),
),

这里实现的一个ListView。

最后附上Github上的Demo的地址:Demo传送门
再推荐两个网站
Flutter中文网
Flutter社区中文资源
如有不正确的地方帮忙指出,谢谢。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,848评论 25 708
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 12,834评论 2 59
  • 从16号移植完鲜胚到今天是第八天。整整8天没有出门,这是有史以来在家宅的最长的一次,并且还宅的心安理得,因为自己是...
    木又sun阅读 162评论 0 0
  • 风在摇树的叶子,我在想你的样子。 ——题记 每...
    如此青梨阅读 594评论 0 3
  • sqlite数据库在Python中的使用简介 1. sqlite3介绍 SQLite数据库是一款非常小巧的嵌入式开...
    SmartGangZ阅读 1,433评论 0 1