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

時間 2019-11-17

標籤 flutter 開始干係官方入門計數 demo 欄目應用數學简体版

原文原文鏈接

直接開始幹，沒有爲何～數組

分析

Flutter 相關環境搭建好後，建立 Flutter 工程就能夠看到官方這個默認的計數器Demo。app

導包

這裏導入Material UI庫less

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

應用入口

main 函數做爲程序入口，經過 runApp 啓動 Flutter 應用，傳入 Widget 參數（MyApp()）。ide
=> 爲 Dart 單行函數寫法。函數

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

應用結構

這裏使用 MaterialApp 構建了個 Material 設計風格的應用 MyApp ，在 MaterialApp 中能夠設置應用名、主題顏色、默認 Home 界面、語言、路由以及一些調試開關等。佈局
MyApp 繼承 StatelessWidget（無狀態組件），直接經過 Build 構建相應的 Widgetui

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 分析完畢...this

總結

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

StatelessWidget

繼承自 Widget 的抽象類，當有一個不須要改變狀態的固定場景就能夠繼承 StatelessWidget 實現，在 build 方法中嵌套實現 UI。StatelessWidget 與 StatefulWidget 對應設計

StatefulWidget

繼承自 Widget 的抽象類，當有一個須要改變狀態的場景就能夠繼承 StatefulWidget 實現，在 createState 中返回須要的 State （繼承 State 實現）。在繼承 State 後，在 build 方法中嵌套實現 UI，在須要更新 UI 時調用 setState 便可。 StatefulWidget 與 StatelessWidget 對應