Flutter – Text

文字(TEXT)是使用最普遍的 Widget,除了 text 的屬性外,還有一些樣式、對齊及每行字數等等的設定。此 Widget 只能實現一種設定,如果一行文字有多種樣式需設定時,請改用 RichText。相關的說明請見程式碼。

Text is the most common Widget in Flutter. The common properties of the Text Widget are style, align, maxline…etc.,if you want setting multiple styles in one line, please use RichText Widget.

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
  Widget build(BuildContext context){
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title:'Starter Template',
      home: Scaffold(
        appBar: AppBar(       
        body:Column(children: [     
            child: Text(
              "Hello Flutter! How's going",  //文字內容
style: TextStyle( //屬性設定 fontSize: 32.0, //字體大小 fontStyle: FontStyle.normal, //字體樣式 color:Color.fromARGB(200, 255, 128, 128), //文字顏色,使用 RGB decoration:TextDecoration.underline , //線條:使用底線[300], //線條顏色 decorationStyle:TextDecorationStyle.wavy //線條樣式 波浪 ), ) , ), Container( child:RichText( text:TextSpan( text:"Hello Fluttre! ", style: TextStyle( fontSize: 32.0, fontStyle: FontStyle.normal , fontWeight: FontWeight.w100, //寬度設定 color:Colors.blueGrey, decoration:TextDecoration.underline ,[300], decorationStyle:TextDecorationStyle.double //線條樣式 雙底線 ), children: [ TextSpan( text:"How's", style:TextStyle( color:, fontStyle: FontStyle.italic , fontWeight: FontWeight.w200, decorationStyle:TextDecorationStyle.dotted //線條樣式 點 ), ), TextSpan( text: " going", style: TextStyle( color:Colors.black87, decoration:TextDecoration.underline ,[300], fontWeight: FontWeight.bold, decorationStyle:TextDecorationStyle.dashed //線條樣式 虛線 ) ), ] ), ), ), ] ), ), ); } }

更詳細的說明請參考 Flutter API 網頁
參考書籍  Beginning Flutter

Please let me know if there are any mistakes in the documents
To be continued….

Exit mobile version