Flutter開始干係列-官方入門計數Demo

Joker_Fu發表於2019-09-14
Flutter

直接開始幹，沒有為什麼～

分析

Flutter 相關環境搭建好後，建立 Flutter 工程就可以看到官方這個預設的計數器Demo。

demo

導包

這裡匯入Material UI庫

import 'package:flutter/material.dart';
複製程式碼

應用入口

  • main 函式作為程式入口，通過 runApp 啟動 Flutter 應用，傳入 Widget 引數（MyApp()）。

  • => 為 Dart 單行函式寫法。

void main() => runApp(MyApp());
複製程式碼

應用結構

  • 這裡使用 MaterialApp 構建了個 Material 設計風格的應用 MyApp ，在 MaterialApp 中可以設定應用名、主題顏色、預設 Home 介面、語言、路由以及一些除錯開關等。

  • MyApp 繼承 StatelessWidget（無狀態元件），直接通過 Build 構建相應的 Widget

class MyApp extends StatelessWidget {
  // 構建應用的根 Widget
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 多工視窗應用名字
      title: 'Flutter Demo',
      // 應用主題
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // 應用預設顯示的介面 Widget
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
複製程式碼

Home 頁實現

  • MyHomePage 這個 Demo 真正的頁面實現，由 parent 傳入 title
  • MyApp 繼承 StatefulWidget（有狀態元件），需要通過 createState 返回相應的 State
class MyHomePage extends StatefulWidget {

  // title 由父類傳入，且設定成 final 不可改變
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}
複製程式碼
  • _MyHomePageState 繼承 State，泛型為 MyHomePage，通過 build 構建 Widget
class _MyHomePageState extends State<MyHomePage> {

  // 記錄點選次數
  int _counter = 0;

  void _incrementCounter() {
    // 呼叫 setState 將呼叫 build 重新繪製介面
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // 構建 Widget
    return Scaffold(
      appBar: AppBar(
        // appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center 將子 Wiget 居中，這裡即螢幕居中
        child: Column(
          // Column 將一組子 Widget 豎向排列
          mainAxisAlignment: MainAxisAlignment.center,
          // 主軸方向居中
          children: <Widget>[
            // 子元件列表
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), 
      // 懸浮按鈕，按下改變 _counter 計數
    );
  }
}

複製程式碼

至此，計數 Demo 分析完畢...

總結

Flutter 中大多數物件都是 Widget，而在這些 Widget 的實現類裡都有其簡單的使用示例。看了這個 Demo 效果，裡面就使用到了如下 Widget ：

  1. StatelessWidget

繼承自 Widget 的抽象類，當有一個不需要改變狀態的固定場景就可以繼承 StatelessWidget 實現，在 build 方法中巢狀實現 UI。StatelessWidget 與 StatefulWidget 對應

  1. StatefulWidget

繼承自 Widget 的 抽象類，當有一個需要改變狀態的場景就可以繼承 StatefulWidget 實現，在 createState 中返回需要的 State （繼承 State 實現）。 在繼承 State 後， 在 build 方法中巢狀實現 UI，在需要更新 UI 時 呼叫 setState 即可。 StatefulWidget 與 StatelessWidget 對應

  1. MaterialApp

MaterialApp 繼承自 StatefulWidget，實現一個 Material Design（材料設計）風格的 App

  1. Scaffold

Scaffold 繼承自 StatefulWidget，實現了基於材料設計的視覺化佈局結構，包含 appBar、body、drawer、 bottomNavigationBar 等

  1. AppBar

AppBar 繼承自 StatefulWidget，實現了材料設計的應用程式欄

  1. Center

Center 繼承自 Align 一步步跟蹤下去，它依然是繼承自 Widget，實現單一子部件居中顯示。

  1. Column

Column 繼承自 Flex 一步步跟蹤下去，它依然是繼承自 Widget，實現豎向陣列顯示 Widget

  1. Text

Text 繼承自 StatelessWidget ，實現單一風格文字控制元件

  1. FloatingActionButton

FloatingActionButton 繼承自 StatelessWidget，實現一個 Material Design（材料設計）風格的浮動按鈕元件

  1. Icon

FloatingActionButton 繼承自 StatelessWidget，實現一個 Material Design（材料設計）風格的圖示元件

相關文章