Flutter學習-3-1（初始程式範例頁面註解）

 /*利用import 引入已經寫好的material.dart類,material.dart裡包含了許多的widget（部件）可修改使用，增加開發的效率，想了解material有什麼東西，可至flutter官網，觀看material內容的說明 https://docs.flutter.dev/development/ui/widgets/material*/

import 'package:flutter/material.dart';

/*main為dart語言的預定入口（也是此flutter的程式入口,程式最開始執行的地方，函式前面使用void，表示這個函式沒有回傳值*/
void main() {
  //運行下面MyApp()這個類，MyApp為自建的類名，可自行改變，首字母需大寫
  runApp(const MyApp());
}

/*此MyApp class(類)，繼承至StatelessWidget父類別(不會有狀態的一個部件)，裡面的內容不會改變狀態
 因此程式在有變動時，會省略讀取此部份，這樣可以加速程式運行的速度*/
class MyApp extends StatelessWidget {
  //此處的key決定下次復用時，是否繼續使用舊的部件，決定的條件canupdate()方法中，當父類別為有參數的建構式，需加super
  const MyApp({Key? key}) : super(key: key);

   /*⋯⋯上面僅是此class建構及宣告的地方，因此runAPP實際會由此處的方法開始運行程式⋯⋯*/

  @override //override表示下面的方法，是由父類StatelessWidget繼承而來的方法，可於下對此方法進行改寫
  //Widget部件建立
  Widget build(BuildContext context) {
    //回傳下面Material框架的內容
    return MaterialApp(
      title: 'Flutter Demo', //標題
      theme: ThemeData( //布景主題
        primarySwatch: Colors.blue, //將上面ThemeData主題的樣本色設為藍色
      ),
      /*在material這個部件中，home 裡放的是這個專案app的主要內容，因內容有些多，因此統一寫在下面MyHomePage這個部件中，
      這樣會使它讓它更為有條理，而title: 'Flutter 註冊頁'，是丟給MyHomePage的參數。於MyHomePage，透過widget.title取出使用 */
      home: const MyHomePage(title: 'Flutter 測試頁'),
      debugShowCheckedModeBanner: false, //由自己補上，加入debugShowCheckedModeBanner: false,可將左上角的debug字句拿掉。
    );
  }
}

/*此MyHomePage，繼承自StatefulWidget父類別（狀態會改變的部件)，裡面有一個_counter數，會隨著點選浮動按鍵改變內容
，當畫面需要更新的時候，需繼承自StatefulWidget父類別，不用就是StatelessWidget*/

class MyHomePage extends StatefulWidget {
  /*冒號前是MyHomePage類的建構式，key和title為接收的參數，title前加入required，為必填參數。冒
  號後為初始值，可以進行重新建構函式的初始值，會在建構前執行。*/
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title; //利用final 宣告一個常數的字串變數，這裡的title等於上面傳進來的this.title

  @override //override表示下面的方法，是由父類別StatefulWidget繼承而來的方法
  /* 下面的程式為透過語法糖精簡化的寫法，完整為
  State<MyHomePage> createState() {
    return _MyHomePageState();
  }
  補註：_MyHomePageState()前的下劃線表示為此類別私有，State<MyHomePage>為回傳值的類型
   */

    State<MyHomePage> createState() => _MyHomePageState();
}

//當監控到狀態改變時，運行下面的程式，_MyHomePageState類別繼承State<>父類別
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0; //宣告一個int類型的變數 _counter，宣告的初始值為0

  //此_MyHomePageState類的方法，_incrementCounter函式，浮動按鍵點擊時，會運作裡面的程式
  void _incrementCounter() {
    //此處設定狀態如何改變，setState裡使用了一個匿名函式，（）{}，改變時會執行裡面的程式碼
    setState(() {
      _counter++; //按了浮動按鍵後_counter這個變數，每按一次就加1

      if(_counter>=10){ //自己補上，假如按鍵大於或等於10時，設_counter=0
        _counter=0;
      }
    });
  }

  @override
  //建立Widget
  Widget build(BuildContext context) {
    //回傳Scaffold框架內容，home的內容主要以Scaffold框架建置，下面的程式就是appBar及body兩部份
    return Scaffold(
      //以下為appBar的內容
      appBar: AppBar(
        title: Text(widget.title), //設定AppBar的標題，這裡的widget.title指MyHomePage這個類別一開始便宣告的屬性
      ),
      //以下為body的內容
      body: Center(  //以center包起來，所以body的內容會置中
        child: Column(  //Column為以列呈現的布局方式，裡面內容物排列的方式為由上到下，若使用Row是左右
          /*MainAxisAlignment指主軸，CrossAxisAlignment為縰軸，此處設定此 Column依主軸置中對齊*/
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[ //child後放置為一個widget,若多個則使用children，用[]清單包起來。此清單包括了兩個文字
            const Text( //點擊次數上方的文字說明
              '你按了這個按鍵:',
            ),
            Text( //點擊次數在畫面呈現的文字
              '$_counter', //此為呈現點擊次數的變數，會隨著上面_counter變數改變
              style: Theme.of(context).textTheme.headline4, //將此文字的style套用了textTheme.headline4的文字佈景主題內容
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton( //下面為右下角的浮動按鈕設定
        onPressed: _incrementCounter, //點擊完成時，會執行_incrementCounter
        tooltip: 'Increment', //工具提示
        child: const Icon(Icons.add), //設定按鈕的圖片為Icons.add
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}