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社区中文资源
如有不正确的地方帮忙指出，谢谢。