Flutter

自谷歌开发者大会之后,一直手痒想体验一下Flutter，发现并非JS那种需要bridge的反复造轮子的框架，在2016年尝试使用React-Native开发App发现真的是很难用，莫名红屏报错填坑无数，这两年也一直寻找能否跨越Bridge的混合框架，Flutter出现了~

为什么是IOT - 因为最近一直在做类似项目包括文章Demo部分

文章中心思想 - 表明填坑过程 & 怎样快速上手

目标

实现高产出
一套代码搭建高性能iOS&Android客户端
尽量减少对native的依赖

DEMO

入门

官网是一定要看的，认真敲几个例子百十来行代码应该就会明白Flutter框架大概是怎么run起来的，剩下的就一步一步填坑，这框架有引力，害得我上厕所都在想这个布局怎么实现...

写在前 - 不要在乎学习成本...

Dart语言

如果熟悉Java或者JS的话，会从Dart身上看到这些语言的影子，在这之前我都不知道Dart是干什么的.

看文章不如直接上手，创建变量？var一下肯定没问题，但先要知道对象叫什么,我是基本上一路猜一路写...

一切皆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的过程,以后有时间争取补完.

Flutter - IOT领域应用场景实战

目标