【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 元件的多種用法，包括字體大小、顏色、裝飾、粗細以及多行顯示等屬性。這些功能讓我們能夠靈活地設計應用程式的文字顯示，提升使用者的視覺體驗。
