flutter學習日記（二）————flutter的佈局和頁面組件

Flutter安裝介紹

在這裏，你必須得安裝好你的開發者環境，而且運行你的第一個flutter程序了。若是你還不知道怎麼開始，請參考Flutter中文網安裝教程或者Flutter官網安裝教程進行安裝環境。我這裏就很少作介紹，安裝過程有問題能夠留言。

目前我開發是經過Android Stdio和VSCode進行開發，若是你是前端開發工程師，你會和我同樣比較喜歡VSCode，可是涉及到Debug的時候，用Android Stdio確實更好。爲了與你們同步，我也先跑了默認的Flutter項目，以下圖：

默認的Flutter項目會對裏面的初始頁面作英文介紹，爲了方便更加深刻的理解，我的加入了新的註釋。打開項目根目錄下的lib/main.dart，即爲項目的入口文件。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());   // Flutter項目運行以後的入口函數，這裏運行MyApp這個類

class MyApp extends StatelessWidget {   // MyApp的類，繼承StatelessWidget組件，表示其狀態不會發生改變，可是其子組件能夠爲StatefulWidget組件
  @override   // 重寫父類StatelessWidget的構造方法
  Widget build(BuildContext context) {  // 構造頁面的函數，其中Context表示其上下文，即經過Context，能夠對該組件進行操做
    return MaterialApp(   // 構造函數會返回一個組件，MaterialApp是一個Flutter框架的一個容器Widget
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue, // 聲明組件的主題顏色
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),  // 代表MyHomePage爲MaterialApp的子Widget，title爲其傳入子組件的值
    );
  }
}

class MyHomePage extends StatefulWidget {   // MyHomePage的類，繼承StatefulWidget組件，表示其狀態改變可使頁面發生改變
  MyHomePage({Key key, this.title}) : super(key: key);  // 這裏的key爲默認加上的，用來標記組件的惟一性，this.title爲其構造函數的參數

  final String title;   // 該類的屬性，方便構造函數進行構造

  @override
  _MyHomePageState createState() => _MyHomePageState();   // StatefulWidget組件的狀態，默認命名爲這樣，經過createState()函數來返回該組件的頁面佈局
}

class _MyHomePageState extends State<MyHomePage> {    // 聲明_MyHomePageState其爲MyHomePage的State類
  int _counter = 0;   // _MyHomePageState的屬性

  void _incrementCounter() {    // _MyHomePageState的函數
    setState(() {   // 經過setState進行改變數據，可以讓頁面也發生改變，若是直接賦值，則不行
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {  // 同上，該爲構造頁面的函數
    return Scaffold(    // 返回一個Scaffold容器Widget，下面即爲對該容器的某些屬性的聲明
      appBar: AppBar(
        title: Text(widget.title),  // 聲明該組件的appBar屬性爲一個AppBar的容器Widget，而且容器的title爲一個Text文本組件，該Text組件的值爲MyHomePage的title屬性
      ),
      body: Center(   // Scaffold的body，聲明其爲一個Center容器Widget的頁面，使其佈局上下左右居中
        child: Column(  // 爲Center組件的子組件，是一個按列方向排序的組件，其子組件能夠有多個
          mainAxisAlignment: MainAxisAlignment.center,  // Column組件的屬性
          children: <Widget>[   // Column組件的子組件，爲垂直方向進行排序渲染
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(   // Scaffold的容器，即爲圖片右下角的按鈕，當其點擊觸發_incrementCounter函數
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

看到了這裏，想必你也對Flutter有了必定的認識。簡單的來講，Flutter項目就是一個Wiget組件+WigetState組件狀態進行組件化的一個項目，並且其代碼基本就是ast（抽象語法樹）類型，可以快速的編譯運行。

佈局組件

這裏就不對組件的含義和內容進行更深的講解了，由於佈局組件比較多，並且屬性也不少，我這裏就羅列幾個比較會經常使用到的佈局組件，若是不是很理解每一個組件的含義的話，建議去《Flutter實戰》這裏看一下每一個組件的含義。

頁面組件

總結

Flutter的組件比較多，官網的英文文檔也基本都有介紹和例子，若是不懂的話，能夠留言。