初略講解Flutter Widget庫

zane發表於2019-07-17
Flutter

Flutter提供了一套豐富、強大的基礎Widget，在基礎Widget庫之上Flutter又提供了一套Material風格（Android預設的視覺風格）和一套Cupertino風格（iOS視覺風格）的Widget庫。

基礎Widget

要使用基礎Widget庫，需要先匯入：

import 'package:flutter/widgets.dart';
複製程式碼
  • Text：該Widget可讓你建立一個帶格式的文字。
  • Row、Column：這些具有彈性空間的佈局類Widget可讓你在水平（Row）和垂直（Column）方向上建立靈活的佈局，其設計是基於Web開發中的Flexbox佈局模型。
  • Stack：取代線性佈局（譯者語：和Android中的FrameLayout相似），Stack允許子Widget堆疊，你可以使用Positioned來定位子Widget相對於Stack的上下左右四條邊的位置，Stacks是基於Web開發中的絕對定位（absolute positioning）佈局模型設計的。
  • Container：Container可讓你建立矩形視覺元素，Container可以裝飾一個BoxDecoration，如background、一個邊框或者一個陰影。Container也可以具有邊框（margins）、填充（padding）和應用於其大小的約束（constraints）。另外，Container可以使用矩陣在三維空間中對其進行變換。

Material Widget

Flutter提供了一套豐富的Material Widget，可幫助你構建遵循Material Design的應用程式。Material應用程式以MaterialApp元件開始，該Widget在應用程式的根部建立了一些有用的Widget，比如一個Theme，它配置了應用的主題。是否使用MaterialApp完全是可選的，但是使用它是一個很好的做法。在之前的示例中，我們已經使用過多個Material Widget了，如：Scaffold、AppBar、FlatButton等。要使用Material Widget，需要先引入它：

import 'package:flutter/material.dart';
複製程式碼

Cupertino Widget

Flutter也提供了一套豐富的Cupertino風格的Widget，儘管目前還沒有Material Widget那麼豐富，但也在不斷的完善中。值得一提的是在Material Widget庫中，有一些Widget可以根據實際執行平臺來切換表現風格，比如MaterialPageRoute，在路由切換時，如果是Android系統，它將會使用Android系統預設的頁面切換動畫（從下向上），如果是iOS系統時，它會使用iOS系統預設的頁面切換動畫（從右往左）。由於在前面的示例中還沒有Cupertino Widget的示例，那現在我們將實現一個簡單的Cupertino頁面：

//匯入cupertino widget庫
import 'package:flutter/cupertino.dart';

class CupertinoTestRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text("Cupertino Demo"),
      ),
      child: Center(
        child: CupertinoButton(
            color: CupertinoColors.activeBlue,
            child: Text("Press"),
            onPressed: () {}
        ),
      ),
    );
  }
}
複製程式碼

下面是在iPhoneX上頁面效果截圖：

初略講解Flutter Widget庫

下面是在Android裝置上頁面效果截圖：

初略講解Flutter Widget庫

總結

Flutter提供了豐富的Widget，在實際的開發中你可以隨意使用它們，不要怕引入過多Widget庫會讓你的應用安裝包變大，因為這不是Web開發，dart在編譯時只會編譯你使用了的程式碼。由於Material和Cupertino都是在基礎Widget庫之上的，所以如果你的應用中引入了這兩者之一，則不需要再引入flutter/widgets.dart了，因為它們內部已經引入過了。

相關文章