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

XiaoCheng123發表於2019-12-18
Flutter元件

Flutter安裝介紹

在這裡，你必須得安裝好你的開發者環境，並且執行你的第一個flutter程式了。如果你還不知道怎麼開始，請參考Flutter中文網安裝教程或者Flutter官網安裝教程進行安裝環境。我這裡就不多做介紹，安裝過程有問題可以留言。

目前我開發是通過Android Stdio和VSCode進行開發，如果你是前端開發工程師，你會和我一樣比較喜歡VSCode，但是涉及到Debug的時候，用Android Stdio確實更好。為了與大家同步，我也先跑了預設的Flutter專案，如下圖：

image

預設的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實戰》這裡看一下每個元件的含義。

image

頁面元件

image

總結

Flutter的元件比較多，官網的英文文件也基本都有介紹和例子，如果不懂的話，可以留言。

相關文章