【從零開始學 Flutter 程式設計】Text 文字標籤元件文字元件

作者： -
【從零開始學 Flutter 程式設計】線上教學課程目錄 使用 Dart 程式語言，開發 Android 和 iOS APP 應用程式。

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 線上教室，臉書粉絲團，會不定期發佈相關資訊，不想錯過最新資訊，不要忘記來按讚，加追蹤喔！也歡迎大家將這套課程分享給更多人喔。
我們下次再見囉！！！掰掰～