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