自谷歌开发者大会之后,一直手痒想体验一下Flutter，发现并非JS那种需要bridge的反复造轮子的框架，在2016年尝试使用React-Native开发App发现真的是很难用，莫名红屏报错填坑无数，这两年也一直寻找能否跨越Bridge的混合框架，Flutter出现了~
为什么是IOT - 因为最近一直在做类似项目包括文章Demo部分
文章中心思想 - 表明填坑过程 & 怎样快速上手
目标
- 实现高产出
- 一套代码搭建高性能iOS&Android客户端
- 尽量减少对native的依赖
DEMO
入门
官网是一定要看的，认真敲几个例子百十来行代码应该就会明白Flutter框架大概是怎么run起来的，剩下的就一步一步填坑，这框架有引力，害得我上厕所都在想这个布局怎么实现...
写在前 - 不要在乎学习成本...
Dart语言
如果熟悉Java或者JS的话，会从Dart身上看到这些语言的影子，在这之前我都不知道Dart是干什么的.
看文章不如直接上手，创建变量？var一下肯定没问题，但先要知道对象叫什么,我是基本上一路猜一路写...
Flutter
一切皆Widget可以理解成UI组件都是Widget对象，整合Material和Cupertion Design设计风格的控件，比如Button，我就觉得RaisedButton好看，iOS无需封装直接拿来用，两平台保持高度一致性，类似的控件还有很多，Demo中会列举出常用的
用RN也可以?还记得AlertIOS和xxxIOS么还指定平台简直垃圾到爆炸,RN粉丝别喷我...
SDK看什么？以下几点需要留意
- 控件叫什么名字？
TableView - > ListView
CollectionView ->GridView
Label -> Text
TextField -> TextField
Button -> RaisedButton|| MaterialButton||FlatButton||CupertinoButton 随你用
如果想用iOS控件比如switch，直接设计风格+控件名,如：CupertinoSwitch
- 控件怎么创建？
只需要关注Text实现就好，外部是布局
Container(
margin: EdgeInsets.only(top: 20),
alignment: AlignmentDirectional.center,
child: Text(
'Shanghai',
style: TextStyle(
fontSize: 20, color: Colors.white, fontWeight: FontWeight.bold),
),
),复制代码和Android或者Web相似，一句话切豆腐
这两个布局说明怎样循环生成子控件 + 布局解释，基本上列表都沿用于此
看到presenter？ 没错是MVP设计模式
Container topView() {
return Container(
height: screenHeight * 0.33,
color: Colors.blue,
child: ListView(
physics: new NeverScrollableScrollPhysics(),//Ban Scroll Gesture
controller: scrollController, //Listener
scrollDirection: Axis.horizontal,
children: devicesList(),
));
}
List devicesList() {
_presenter.getDeviceList();
List cell = new List();
for (var i = 0; i < _presenter.deviceList.length; ++i) {
DeviceData device = _presenter.deviceList[i];
cell.add(deviceCell(i, device));
}
return cell;
}复制代码 - 我的Controller/Activity在哪
StatefulWidget 有状态 - 常用可以管理子控件刷新
StatelessWidget 无状态 - 不需要管理子控件状态刷新复制代码直接上代码，AndroidStudio有语法糖，直接stful即可快速生成，无状态stless
class MineController extends StatefulWidget {
@override
_MineControllerState createState() => _MineControllerState();
}
class _MineControllerState extends State {
@override
Widget build(BuildContext context) {
return Scaffold( //整个页面承载对象
appBar: AppBar( //导航样式
backgroundColor: Colors.white,
elevation: 0.0,//阴影
title: Text('Mine'), //标题
),
body: ListView(children: cellView()), //主视图
);
}复制代码 既想要无状态又想要有状态怎么办？
home指向有状态Widget即可，下面是比较完整的页面代码
class HomeController extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primaryColor: Colors.white), home: HomeCtrl());
}
}
class HomeCtrl extends StatefulWidget {
@override
_HomeCtrlState createState() => _HomeCtrlState();
}
class _HomeCtrlState extends State {
HomePresenter presenter = new HomePresenter();
@override
Widget build(BuildContext context) {
return new Scaffold(
drawer: Drawer(), //抽屉，直接创建就有
appBar: AppBar(
title: Text('Home'),
backgroundColor: Colors.white,
elevation: 1.0,
actions: [IconButton(icon: Icon(Icons.add), onPressed: () {})],
),
body: Stack( //Stack布局主要是可以在图片上面承载子控件
children: [
Image.asset(
'static/home.jpeg',
fit: BoxFit.fill,
),
ListView.builder(
padding: EdgeInsets.only(left: 20, right: 20),
itemCount: 10,
itemBuilder: itemView,
),
],
),
);
}复制代码 Layout
没有xib、storyboard或xml, 对于我码代码的习惯来说，并不喜欢拖拖拽拽，coding能解决的问题干嘛搞这么复杂，何况你拖完就结束了？不会的...
常用布局
Container 只能放一个子控件(放row/column没问题啊 毕竟是一个对象)
Row 行 可以放多个子控件
Column 列 可以放多个子控件
Stack 可重叠，举例：在背景图片上面放控件
很复杂的布局也离不开以上几个Layout，基本上贯穿了整个项目
需要注意的是，认真研究这四个控件的属性，基本上满足大部分应用场景
DEMO架构
细节不上了,整体就是这样,有点偏向iOS
Http推荐使用 dio
Websocket: 参考官网
设计参考
- IOT终端设备不能只当做工具来使用,更偏向一台互联网设备
- 推荐使用使用字体类图标,Flutter整合两个平台的文字图标,基本可以覆盖大部分开发需求
- 统一的Widget可极大减少iOS&Android平台差异性
FAQ
这里提供一些常用设计控件速查
- 左侧抽屉叫什么?
Scaffold里的属性Scaffold理解一张页面包括了appBar(导航)和body(主页面)
return new Scaffold(
drawer: Drawer(),
);复制代码- 如何实现ListView iOS滑动删除子控件效果?(我帮你们谷歌完了)
在布局cell最外层添加,showSnackBar自带的toastView iOS看着效果很不错,关键Android还用得上~
child: Dismissible(
key: Key('1'),
background: Container(
color: Colors.red,
),
onDismissed: (d) {
Scaffold.of(context).showSnackBar(new SnackBar(
content: new Text("Remove Success"),
));
},)复制代码- 底部tabbar
Scaffold属性,记得body:要实现bar里面所有controller
bottomNavigationBar复制代码- 修改返回按钮样式返回无效?
是的,也要手动实现返回 Navigator.of(context).pop();
- 轮播图
自己可以实现,ListView横向之后,添加监听 scrollController,不然你看不到offset,自己实现一个轮播图的封装单独不大,日后写一个组件share一下
写在后:
快速学习和实现怎么具体操作
推荐按照官网demo敲一边,能理解一下这东西怎么来的.
文中Demo未实现的部分还有很多,主要是纠结细节部分怎么实现,更多的页面也就是重复Coding的过程,以后有时间争取补完.