【Flutter 程式設計入門實戰 30 天】Day 9：Text 文字標籤元件

【Flutter 程式設計入門實戰 30 天】線上教學課程目錄 使用 Dart 程式語言，開發 Android 和 iOS APP 應用程式。

哈囉～大家好，我是 KT ，今天實戰第九天，KT 將為大家來介紹，Text 文字標籤元件。

Text 文字標籤元件文字元件

Text 文字標籤元件，可用來顯示文字的元件。

Text 文字標籤元件，常用的屬性

• data：要顯示的文字
• maxLines：文字顯示行數
• style：可以設定字體大小、顏色等樣式
• textDirection：文字顯示方向

起手式範例

套用下方文字標籤元件範例，可以使用此起手式範例，只要更改程式碼中的「更改此處程式碼」即可。

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('HKT線上教室'),
      ),
      body: HomePage(),
    ));
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      //↓↓↓更改此處程式碼↓↓↓
      child: Text('HKT線上教室'),
    );
  }
}

範例：純顯示文字

Text('HKT線上教室')

執行畫面

範例：設定行數限制 maxLines 顯示

//沒有設定 maxLines 顯示無上限
Text('HKT線上教室\n1\n2\n3\n4\n5\n6')

執行畫面

//只能顯示兩行
Text('HKT線上教室\n1\n2\n3\n4\n5\n6',maxLines: 2)

執行畫面

範例：設定 style 顯示樣式

設定字體大小為:30

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

執行畫面

設定字體顏色為：紅色

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

執行畫面

• 使用系統顏色
  Colors.red
• 使用 8 個 16 進制自定義顏色
  Color(0xFFFF0000)
• 使用 ARGB 自定義顏色 (A,R,G,B)，第一個欄位為 Alpha 透明度
  Color.fromARGB(255, 255, 00, 00)

設定顯示底線：

//TextDecoration.underline ，顯示底線
Text('HKT線上教室',
              style: TextStyle(decoration: TextDecoration.underline))            

執行畫面

設定顯示中間刪除線：

//TextDecoration.lineThrough，中間刪除線
Text('HKT線上教室',
              style: TextStyle(decoration: TextDecoration.lineThrough))              

執行畫面

設定顯示粗體

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

執行畫面

---

那今天就介紹到這邊囉～

順帶一提，KT 線上教室，臉書粉絲團，會不定期發佈相關資訊，不想錯過最新資訊，不要忘記來按讚，加追蹤喔！也歡迎大家將這篇文章分享給更多人喔。

我們明天見囉！！！掰掰～

參考資料

HKT 線上教室
http://tw-hkt.blogspot.com/

Background vector created by freepik
https://www.freepik.com