【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

留言

這個網誌中的熱門文章

16天記下7000單字

Costco 好市多 AFTERSHOKZ 骨傳導 藍牙運動耳機 AS650 開箱實測評價與心得

2019 最新入門零基礎【從零開始學 Java 程式設計】線上教學課程目錄 (7/5 更新囉~)