Flutter - IOT领域应用场景实战

自谷歌开发者大会以后,一直手痒想体验一下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<Widget> devicesList() {
  _presenter.getDeviceList();
  List<Widget> 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<MineController> {
  @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<HomeCtrl> {
  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: <Widget>[IconButton(icon: Icon(Icons.add), onPressed: () {})],
      ),
      body: Stack(    //Stack布局主要是能够在图片上面承载子控件
        children: <Widget>[
          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的过程,之后有时间争取补完.