1. 程式人生 > >Flutter - IOT領域應用場景實戰

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的過程,以後有時間爭取補完.