2024 最新 Flutter 教學 - Flutter 終極指南: 連結
從零開始學 Dart 程式設計: 連結
Flutter 程式設計入門實戰 30 天: 連結
哈囉~大家好,我是 KT ,今天【iT邦幫忙鐵人賽】挑戰第九天,KT 將為大家來介紹,Text 文字標籤元件。
Text 文字標籤元件,可用來顯示文字的元件。
套用下方文字標籤元件範例,可以使用此起手式範例,只要更改程式碼中的「更改此處程式碼」即可。
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 顯示無上限
Text('HKT線上教室\n1\n2\n3\n4\n5\n6')
//只能顯示兩行
Text('HKT線上教室\n1\n2\n3\n4\n5\n6',maxLines: 2)
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