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