【Flutter 學習筆記】Text 元件：顯示文字的技巧與屬性設定

【Flutter 學習筆記】🎬 教學影片：連結

【Flutter 學習筆記】📚 文章目錄：連結

在這篇文章中，我們將深入探討 Flutter 中的 Text 元件，這是一個用於顯示文字的基本組件。無論是純文字顯示、字體樣式的設定，還是多行顯示，Text 元件都能輕鬆應對。接下來，我們將逐步解析每個功能，讓讀者能夠清楚理解如何使用這些屬性來美化應用程式的介面。

1. 純文字顯示

首先，我們來看看如何使用 Text 元件來顯示純文字。以下是最基本的用法：

Text('HKT線上教室')

這行程式碼會在畫面上顯示「HKT線上教室」這段文字。

2. 設定字體大小

接下來，我們可以透過 TextStyle 來設定字體的大小。以下範例將字體大小設定為 30：

Text(
  'HKT線上教室',
  style: TextStyle(fontSize: 30),
)

在這裡，我們使用 TextStyle 的 fontSize 屬性來調整字體的大小，使其更為突出。

3. 設定字體顏色

除了字體大小，我們還可以設定字體的顏色。以下範例將字體顏色設定為紅色：

Text(
  'HKT線上教室',
  style: TextStyle(color: Colors.red),
)

這裡的 color 屬性使用了 Flutter 提供的 Colors 類別，讓我們能夠輕鬆選擇顏色。

4. 設定字體裝飾

4.1 底線

如果我們想要在文字下方添加底線，可以使用 decoration 屬性：

Text(
  'HKT線上教室',
  style: TextStyle(decoration: TextDecoration.underline),
)

這樣，文字就會顯示為帶有底線的樣式。

4.2 刪除線

同樣地，我們也可以使用刪除線來表示文字的刪除：

Text(
  'HKT線上教室',
  style: TextStyle(decoration: TextDecoration.lineThrough),
)

這樣的效果在顯示過期或不再適用的資訊時非常有用。

5. 設定字體粗細

若要將字體設定為粗體，可以使用 fontWeight 屬性：

Text(
  'HKT線上教室',
  style: TextStyle(fontWeight: FontWeight.bold),
)

這樣，文字將以粗體顯示，讓它在視覺上更具吸引力。

6. 多行顯示

如果我們需要顯示多行文字，可以使用 \n 來換行：

Text('HKT線上教室\n1\n2\n3\n4\n5\n6')

這段程式碼會將文字顯示為多行，每行顯示一個項目。

7. 設定行數限制

最後，我們可以使用 maxLines 屬性來限制顯示的行數。例如，以下範例將最多顯示兩行：

Text(
  'HKT線上教室\n1\n2\n3\n4\n5\n6',
  maxLines: 2,
)

這樣，超過兩行的文字將不會顯示，這在需要控制介面佈局時非常有用。

總結

透過以上的介紹，我們了解了 Flutter 中 Text 元件的多種用法，包括字體大小、顏色、裝飾、粗細以及多行顯示等屬性。這些功能讓我們能夠靈活地設計應用程式的文字顯示，提升使用者的視覺體驗。