iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 9
1
Mobile Development

Flutter 程式設計入門實戰 30 天系列 第 9

Day 9:Text 文字標籤元件

  • 分享至 

  • xImage
  •  

2024 最新 Flutter 教學 - Flutter 終極指南: 連結
從零開始學 Dart 程式設計: 連結
Flutter 程式設計入門實戰 30 天: 連結


哈囉~大家好,我是 KT ,今天【iT邦幫忙鐵人賽】挑戰第九天,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))

執行畫面


那今天【iT邦幫忙鐵人賽】就介紹到這邊囉~

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

我們明天見囉!!!掰掰~

參考資料

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

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


上一篇
Day 8:Center 置中容器
下一篇
Day 10:Button 按鈕元件
系列文
Flutter 程式設計入門實戰 30 天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言