【Flutter 程式設計入門實戰 30 天】Day 5:起手式程式碼


【Flutter 程式設計入門實戰 30 天】線上教學課程目錄 使用 Dart 程式語言,開發 Android 和 iOS APP 應用程式。

哈囉~大家好,我是 KT ,今天實戰第五天,KT 將為大家來介紹,起手式程式碼。繼上一節課程「第一支 Flutter 應用程式 - Hello World」,這節我們來看一下,我們最一開始專案的程式碼。

Flutter 處理畫面的兩種狀態

在 Flutter 狀態分為兩種,一種是無狀態(StatelessWidget)和另一種有狀態(StatefulWidget)
  • 無狀態(StatelessWidget):
    初始化後都不會改變狀態的 widget,那就選擇 StatelessWidget
  • 有狀態(StatefulWidget):
    因 StatelessWidget 是靜態的,所以他初始化後,不會重新創建自己。反過來StatefulWidget 可以透過 setState 再一次重繪。

兩種狀態的選擇方式

  • 大部分都是使用 StatelessWidget,當您需要透過 setState 方式更新狀態時才需要採用 StatefulWidget 狀態
  • StatefulWidget 運算成本比較昂貴,勿濫用,若需使用盡量安排使用在末子節點上,且讓元件數量降至最少,減少降低系統重繪的成本。

快速完成程式碼

透過 stless 或 stful 關鍵字,快速生成程式碼,同學與小夥伴們可不用傻傻的一個字一個字打。

StatelessWidget (無狀態) 範例程式碼

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());

}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}
我們可以透過點擊,查看 StatelessWidget 的源碼繼承了 Widget,而在 Widget 上方有加入一個注釋(annotation),「immutable」。
注釋(annotation),可以想像成是幫我們檢查程式語法的小幫手。
查看 「immutable」解釋:
簡單說就是定義的欄位值都必須是 final ,固定不可變的值。

StatefulWidget (有狀態) 範例程式碼

在 StatefulWidget 也繼承了 Widget,所以定義的欄位值也都必須是 final ,固定不可變的值。那有趣了 StatefulWidget 不是可以動態變動資料嗎?
所以他必須比 StatelessWidget (無狀態) 多去實作一個 createState 方法 。在此類別即可以定義「不是 final」 值的欄位資料。
import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());

}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

起手式程式碼

在之後的章節範例程式,KT 會先寫一個「起手式程式碼」,就是最一開始基礎的畫面程式,在根據該篇主題,加入相關程式碼。為了讓同學與小夥伴們能快速理解,HomePage 沒有獨立搬出去,實際應用檔案很多時,不會全部寫在同一支 dart 檔案裡,會依照功能邏輯頁面搬出去,如存到:home_page.dart。
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text('HKT線上教室'),
      ),
      body: HomePage(),
    ));
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("第一個APP"),
    );
  }
}

執行畫面

檔案名稱命名風格

  • 檔案名稱:小寫用底線分隔,如:home_page.dart
  • 類別名稱:大駱駝方式,如:HomePage
另外 body 裡面的程式建議獨立出去一個 class ,若沒拉出去,部分元件,如:SnackBar、AlertDialog…等相關元件,會無法正常使用,詳細原因,會到該元件章節,再進一部說明。

波動拳程式

flutter 而容易,寫出「波動拳程式」,這樣的結構很容易降低程式碼「可讀性」、「易維護性」與「易擴展性」,應該盡量避免。

不好的程式結構範例

下方這段程式碼,與上面 KT 建議「起手式程式碼」,畫面一模一樣,一開始或許你會覺得,這樣寫起來比較順手,看起來也比較簡潔,但實際畫面元件一多時,全部都塞在 body,這樣的結構是不好的。KT 建議依照功能邏輯劃分出去。
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('第一個APP'),
      ),
      body: Center(
        child: Text('HKT線上教室'),
      ),
    ),
  ));
}

那今天就介紹到這邊囉~
順帶一提,KT 線上教室,臉書粉絲團,會不定期發佈相關資訊,不想錯過最新資訊,不要忘記來按讚,加追蹤喔!也歡迎大家將這篇文章分享給更多人喔。
我們明天見囉!!!掰掰~

參考資料

Background vector created by freepik
https://www.freepik.com
Flutter 官網
https://flutter.dev/docs

留言

這個網誌中的熱門文章

16天記下7000單字

Costco 好市多 AFTERSHOKZ 骨傳導 藍牙運動耳機 AS650 開箱實測評價與心得

2019 最新入門零基礎【從零開始學 Java 程式設計】線上教學課程目錄 (7/5 更新囉~)