Flutter 元件基礎

當元件的狀態發生改變時，元件會重構自身的描述，並且Flutter框架會對比之前的描述，以確定地層渲染樹從當前狀態轉換到下一個狀態所需要的最小更改，最後再執行介面的重新整理。

Flutter中真正代表螢幕現實元素的類是Element。Widget只是描述Element的配置資料而已，並且一個Widget可以對應多個Element。如下圖所示；

StatelessWidget

表示沒有狀態的元件。如果想要建立一個無狀態的元件，只需要繼承 StatelessWidget 根元件，並且重寫 build() 方法即可。

由於沒有狀態，因此StatelessWidget只在初識話階段構建Widget時才會執行一次渲染，因此它無法基於任何時間或使用者操作重繪試圖。

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    throw UnimplementedError();
  }
}

在該繼承和重寫的方法中，出現了一個build方法，有一個引數為context。context是當前Widget在Widget樹中執行相關操作的一個控制代碼。可以使用它向上遍歷Widget樹以及按照Widget型別查詢父級Widget。

StatefulWidget

表示有狀態的Widget。通過與State物件進行關聯來管理元件狀態樹，內部成員變數不需要使用final修飾符，當需要更新內部變數時，直接使用 setState()

如果需要建立一個有狀態的元件，需要繼承 StatefulWidget ，並且重寫 build() 。

class MyApp extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    throw UnimplementedError();
  }
}
class MyAppState extends State<MyApp>{
  void method(){
    setState(() {
      //進行狀態的變更
    });
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    throw UnimplementedError();
  }
}
 

對比於StatelessWidget而言，StatefulWidget多了一個狀態。當內部東西需要變更時，通常是呼叫setState()方法，從而讓內部的狀態發生改變，從而讓Flutter進行重繪。在StatefulWidget中新引入了一個 State<*> 這個是狀態改變類。

MaterialApp

作為提供入口的Widget

AppBar

頂部導航欄元件，可以用來控制路由、標題和溢位下拉選單。

AppBar如下圖所示

Scaffold

具有Material Design佈局風格的Widget，被設計為MaterialApp的頂級容器元件，可以自動填充可用的螢幕空間，佔據整個視窗或者裝置螢幕。

對於Scaffold中，有一個示例程式碼如下:

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('首頁'),
        ),
        bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          currentIndex: 1,
          items: const [
            BottomNavigationBarItem(
                icon: Icon(Icons.account_balance),
                title: Text('銀行')
            ),
            BottomNavigationBarItem(
                icon: Icon(Icons.contacts),
                title: Text('聯絡人')
            ),
            BottomNavigationBarItem(
                icon: Icon(Icons.library_music),
                title: Text('音樂')
            )
          ],
        ),
        body: const Center(
          child: Text('聯絡人頁面'),
        ),
      ),
    );
  }
}

經過編譯，現實的結果如下:

文字元件

文字元件是Text元件，元件的基本屬性如下表

按鈕元件

Material元件庫中有多個按鈕元件

• RaisedButton
• FlatButton
• OutlineButton
• IconButton

按鈕的樣例程式碼如下

import 'package:flutter/material.dart';

void main() => runApp(ButtonWidget());

class ButtonWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Button 元件'),),
        body: Center(
          child: Column(
            children: <Widget>[
              FlatButton(onPressed: () => print('FlatButton'), child: Text('Flat'),),
              RaisedButton(onPressed: ()=>print('RaisedButton'),child: Text("RaisedButton"),),
              FloatingActionButton(onPressed: ()=>print('FloatingActionButton'),child: const Text('FloatingActionButton'),),
              OutlineButton(onPressed: ()=>print('OutlineButton') ,child: const Text("OutlineButton"),),
              IconButton(onPressed: ()=>print("IconButton"), icon: const Icon(Icons.thumb_up))
            ],
          ),
        ),
      ),
    );
  }
}

在程式碼中，除了FloatingActionButton和IconButton沒有被廢棄以外，其他均被廢棄，不推薦使用。

圖片元件

圖片元件是用來載入和顯示圖片的元件。可以使用不同的方式進行載入不同形式的圖片。

• Image 通過ImageProvider來載入圖片
• Image.asset 用來載入本地的圖片
• Image.file 用來載入本地 .file 檔案型別的圖片
• Image.network 用來載入網路圖片
• Image.memory 用來載入記憶體快取圖片

fit填充模式

• BoxFit.fill 全圖顯示，不夠的部分拉伸
• BoxFit.contain 全圖顯示，超過部分被裁減
• BoxFit.cover 預設顯示規則
• BoxFit.fitWidth 寬度上充滿空間，高度按比例縮放，超出部分被裁剪
• BoxFit.fitHeight 高度充滿空間，寬度按比例，超出部分裁剪
• BoxFit.scaleDown 與contain效果差不多，但是會縮小影象以確保影象位於顯示空間內
• BoxFit.none 沒有填充策略，按原大小顯示

Image元件圖片是有快取的，預設最大快取數量是1000，最大空間為100MB。

圖示元件

Icon元件是圖示元件，也可以使用IconButton。常用元件如下

• IconButton 可互動的Icon元件
• Icons 自帶的Icon元件集合
• IconTheme Icon元件主題
• ImageIcon 通過AssetImages或者圖片顯示Icon元件

Icon的基本的屬性如下

輸入框元件

輸入框元件TextField是一個文字輸入框元件。常見的屬性如下：

表單元件

Form是一個包含表單元素的表單元件，可以用來對輸入的資訊進行校驗。表單的一些屬性如下

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(FormWidget());
}

class FormWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return FormWidgetState();
  }
}

class FormWidgetState extends State<FormWidget> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  String? _userName;
  String? _userPassword;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "flutter demo",
      theme: ThemeData(
        primaryColor: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("Form元件"),
        ),
        body: Form(
          key: _formKey,
          child: Column(
            children: [
              TextFormField(
                decoration: const InputDecoration(
                    hintText: "使用者名稱",
                    icon: Icon(Icons.person)
                ),
                validator: (value) {
                  if (value?.length != null && value!.length <= 5) {
                    return "使用者名稱需要大於5個字元";
                  }
                },
              ),
              TextFormField(
                decoration: const InputDecoration(
                    hintText: "密碼",
                    icon: Icon(Icons.lock)
                ),
                obscureText: true,
                validator: (value) {
                  if (value?.length != null && value!.length <= 8) {
                    return "密碼必須大於8字元";
                  }
                },
              ),
              RaisedButton(
                onPressed: () {
                  if(_formKey.currentState?.validate()==true){
                    _formKey.currentState?.save();
                  }
                },
                padding: EdgeInsets.all(15.0),
                child: Text("login"),
                color: Theme
                    .of(context)
                    .primaryColor,
                textColor: Colors.white,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

根據上面的程式碼進行編譯執行後，能得到兩個簡單的輸入框以及一個按鈕，當用戶名或者密碼不符合預期時，便會提示錯誤的資訊。

容器元件

Container是Flutter提供的容器元件，可以包含一個子元件，自身具備alignment、margin、padding等基礎屬性。其包括的屬性如下：

padding包含容器內部的邊距，margin是外部的邊距。點選padding中的區域會有事件響應，而margin的區域則不會。

盒約束模型

指元件可以按照指定限制條件來決定如何佈局自身位置。常見的元件包括

• ConstrainedBox
• SizedBox
• UnconstrainedBox

ConstrainedBox

常見的盒約束元件，用來對子元件新增額外的約束。

ConstrainedBox{
	Key key,
	@required this.constraints,
	Widget child
}

SizedBox

用於給子元素指定固定的寬和高

SizedBox{
	double width,
	double height,
	Widget child
}

SizedBox是ConstrainedBox的子類。

UnconstrainedBox

不會對子元件產生任何限制，允許子元件按照自己本身的大小進行繪製，比較少用到。

參考書籍 《Flutter跨平臺開發入門與實戰》