Flutter - IOT領域應用場景實戰

和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