跳到主內容

Flutter 的字型和排版

瞭解 Flutter 對排版的支援。

排版 涵蓋了字型或字型的風格和外觀:它指定了字型的粗細、傾斜度、字母之間的間距以及文字的其他視覺方面。

並非所有字型都是一樣的。

字型樣式至少由一種字形、表示同一字體系列中字型的通用字元規則(例如 RobotoNoto)、一種字型粗細(例如常規、粗體或數值)和一種樣式(如常規、斜體等)來定義。所有這些以及額外的預設屬性共同構成了我們所說的靜態字型。

可變字型允許在執行時修改其中一些屬性,並將通常的多個靜態字型儲存在一個檔案中。

排版比例

#

排版比例是一組相關的文字樣式,旨在為您的應用程式提供平衡、凝聚力和視覺多樣性。

Flutter 提供的常用排版比例由 TextTheme 提供,包括五個類別,指示功能

  • 顯示
  • 標題
  • 標題
  • 標籤
  • 正文

每個類別還有三種尺寸變體

這些類別和文字大小的十五種組合中的每一個都由一個 TextStyle 表示。

Listing of typographical scale for Material TextTheme

Flutter 暴露的所有特定於平臺的排版比例都包含在 Typography 類中。通常,您不需要直接引用此類,因為 TextTheme 將本地化到您的目標平臺。

可變字型

#

可變字型 允許您控制文字樣式的預定義方面。可變字型支援特定的軸,例如寬度、粗細、傾斜度(僅舉幾例)。使用者可以在指定字型時選擇連續軸上的任何值

使用 Google Fonts 型別測試器

#

Google Fonts 上越來越多的字型提供了一些可變字型功能。您可以使用型別測試器檢視選項範圍,並瞭解如何更改單個字型。

Demonstration of varying aspects for Noto Sans with Lorem ipsum text

即時移動任何軸上的滑塊,以檢視它如何影響字型。在程式設計可變字型時,使用 FontVariation 類來修改字型的設計軸。FontVariation 類符合 OpenType 字型變數規範

靜態字型

#

Google Fonts 還包含靜態字型。與可變字型一樣,您需要了解字型的設計方式才能知道可用的選項。再次,Google Fonts 網站可以提供幫助。

使用 Google Fonts 包

#

雖然您可以從該網站下載字型並在應用程式中手動安裝它們,但您可以選擇直接從 google_fonts 包在 pub.dev 上使用主題。

它們可以透過簡單地引用字型名稱按原樣使用

dart
Text(
  'This is Google Fonts',
  style: GoogleFonts.lato(),
),

或透過設定結果 TextStyle 上的屬性進行自定義

dart
Text(
  'This is Google Fonts',
  style: GoogleFonts.lato(
    textStyle: Theme.of(context).textTheme.displayLarge,
    fontSize: 48,
    fontWeight: FontWeight.w700,
    fontStyle: FontStyle.italic,
  ),
),

修改字型

#

使用以下 API 以程式設計方式更改靜態字型(但請記住,這僅適用於設計支援該功能的字型)

FontFeature 對應於 OpenType 特徵標籤,可以看作是啟用或停用給定字型功能的布林標誌。

其他資源

#

以下影片展示了 Flutter 排版的一些功能,並將其與 Material Cupertino 的外觀和感覺(取決於應用程式執行的平臺)、動畫和自定義片段著色器結合起來

在新的標籤頁中在 YouTube 上觀看:“使用 Flutter 製作精美的原型設計”

要閱讀一位工程師定製可變字型並將其動畫化為變形的經驗(並且是上述影片的基礎),請檢視 使用 Flutter 進行趣味排版,這是一篇 Medium 上的免費文章。相關的示例也使用了自定義著色器。