Flutter之Text組件

const Text(
this.data,//this.data 要顯示的文本內(nèi)容
    {Key key,
    this.style,
    this.textAlign,//文本對(duì)齊方式
    this.textDirection,//文本方向
    this.locale,
    this.softWrap,//是否自動(dòng)換行 false文字不考慮容器大小，單行顯示，超出屏幕部分將默認(rèn)截?cái)嗵幚?    this.overflow,//文字超出屏幕之后的處理方式，TextOverflow.clip剪裁   TextOverflow.fade 漸隱  TextOverflow.ellipsis省略號(hào)
    this.textScaleFactor,//文本字體的縮放倍數(shù)，如：1.5則在默認(rèn)字體上變成1.5倍大小字體，0.5則是0.5倍
    this.maxLines,//文本最多顯示多少行
    this.semanticsLabel,
    }) : assert(data != null),
    textSpan = null,
    super(key: key);

const TextStyle({
    this.inherit = true, //默認(rèn)為true，設(shè)置為false時(shí)候表示不顯示
    this.color,//文字顏色
    this.fontSize,//文字大小 ，默認(rèn)是14.0的
    this.fontWeight,//字體粗細(xì)  粗體和正常
    this.fontStyle,//文字樣式，normal正常 italic 斜體
    this.letterSpacing,//字母間隙(負(fù)值可以讓字母更緊湊)
    this.wordSpacing,//單詞間隙(負(fù)值可以讓單詞更緊湊)
    this.textBaseline, //alphabetic：用于對(duì)齊字母字符底部的水平線,  ideographic：用于對(duì)齊表意字符的水平線
    this.height,  //用在Text控件上的時(shí)候，會(huì)乘以fontSize做為行高
    this.locale,//國(guó)際化
    this.foreground,//用paint來(lái)渲染text，也可以用他來(lái)改變字體顏色等
    this.background,
    this.decoration, //四種下劃線、lineThrough刪除線、overline上劃線，默認(rèn)是無(wú)
    this.decorationColor,//線的顏色
    this.decorationStyle,//文字裝飾的風(fēng)格  dashed虛線大間隔,dotted虛線小間隔，double在underline和lineThrough時(shí)兩條線，在overline時(shí)三條線，solid在underline和solidlineThrough時(shí)一條線,在overline兩條線
    this.debugLabel,
    String fontFamily,
    String package,
    }) : fontFamily = package == null ? fontFamily : 'packages/$package/$fontFamily',
    assert(inherit != null),
    assert(identical(color, null) || identical(foreground, null), _kColorForegroundWarning);

const Text.rich(
    this.textSpan,//可以給文本中的每個(gè)textSpan設(shè)置其樣式
    {
    Key key,
    this.style,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
    }): assert(textSpan != null),
    data = null,
    super(key: key);

body: ListView(
          children: <Widget>[
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("文本方向 TextDirection.ltr",
                  textDirection: TextDirection.ltr
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("文本方向 TextDirection.rtl",
                  textDirection: TextDirection.rtl
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("文本對(duì)齊方式 TextAlign.center",
                textAlign: TextAlign.center,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("文本對(duì)齊方式 TextAlign.left",
                textAlign: TextAlign.left,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("文本對(duì)齊方式 TextAlign.right",
                textAlign: TextAlign.right,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("文本對(duì)齊方式 TextAlign.justify 兩端對(duì)齊",
                textAlign: TextAlign.justify,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("文本對(duì)齊方式 TextAlign.start",
                textAlign: TextAlign.start,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("文本對(duì)齊方式 TextAlign.end",
                textAlign: TextAlign.end,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "softWrap: true    是否自動(dòng)換行是否自動(dòng)換行是否自動(dòng)換行是否自動(dòng)換行是否自動(dòng)換行是否自動(dòng)換行是否自動(dòng)換行是否自動(dòng)換行是否自動(dòng)換行",
                softWrap: true,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "softWrap: false    是否自動(dòng)換行是否自動(dòng)換行是否自動(dòng)換行是否自動(dòng)換行是否自動(dòng)換行是否自動(dòng)換行是否自動(dòng)換行是否自動(dòng)換行是否自動(dòng)換行",
                softWrap: false,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "TextOverflow.clip    文字超出屏幕之后的處理方式文字超出屏幕之后的處理方式文字超出屏幕之后的處理方式",
                overflow: TextOverflow.clip,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "TextOverflow.ellipsis    文字超出屏幕之后的處理方式文字超出屏幕之后的處理方式文字超出屏幕之后的處理方式",
                overflow: TextOverflow.ellipsis,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "TextOverflow.fade    文字超出屏幕之后的處理方式文字超出屏幕之后的處理方式文字超出屏幕之后的處理方式",
                overflow: TextOverflow.fade,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("textScaleFactor  字體縮放倍數(shù)",
                textScaleFactor: 2.0,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "maxLines  文本最多顯示多少行,可以和overflow: TextOverflow.ellipsis一起使用，在最后一行末尾顯示省略號(hào)  文本最多顯示多少行文本最多顯示多少行文本最多顯示多少行",
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("color顏色，fontSize大小",
                style: TextStyle(
                    color: Color(0xffff0000),
                    fontSize: 18.0
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("fontWeight 字體粗細(xì)  w100 ~ w900 和粗體與正常，正常是w400,粗體是w700",
                style: TextStyle(
                    fontWeight: FontWeight.bold
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("fontStyle 文字樣式，normal正常, italic 斜體",
                style: TextStyle(
                    fontStyle: FontStyle.italic
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "對(duì)比wordSpacing單詞間隙, letterSpacing字母間隙, Hello World Hello World",
                style: TextStyle(
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "對(duì)比wordSpacing單詞間隙, letterSpacing字母間隙, Hello World Hello World",
                style: TextStyle(
                  wordSpacing: 10.0,
                  letterSpacing: 1.0,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "對(duì)比wordSpacing單詞間隙, letterSpacing字母間隙, Hello World Hello World",
                style: TextStyle(
                  wordSpacing: 1.0,
                  letterSpacing: 5.0,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "textBaseline Hello World Hello World Hello World Hello World \n哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦",
                style: TextStyle(
                    textBaseline: TextBaseline.alphabetic
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "textBaseline Hello World Hello World Hello World Hello World \n哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦",
                style: TextStyle(
                    textBaseline: TextBaseline.ideographic
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "height會(huì)乘以fontSize做為行高",
                style: TextStyle(
                  height: 2.0,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "height會(huì)乘以fontSize做為行高",
                style: TextStyle(
                  height: 1.0,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "decoration四種下劃線underline、lineThrough刪除線、overline上劃線，默認(rèn)是無(wú)；decorationColor線的顏色；文字裝飾的風(fēng)格  dashed虛線大間隔,dotted虛線小間隔，double在underline和lineThrough時(shí)兩條線，在overline時(shí)三條線，solid在underline和solidlineThrough時(shí)一條線,在overline兩條線",
                style: TextStyle(
                  fontSize: 20.0,
                  decoration: TextDecoration.lineThrough,
                  decorationColor: Color(0xffff0000),
                  decorationStyle: TextDecorationStyle.solid,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text.rich(
                TextSpan(
                    text: "Text.rich方式",
                    children: <TextSpan>[
                      TextSpan(
                          text: "改變顏色",
                          style: TextStyle(
                            color: Color(0xffff0000),
                          )
                      ),
                      TextSpan(
                          text: "改變大小",
                          style: TextStyle(
                              fontSize: 12.0
                          )
                      ),
                    ]
                ),
              ),
            ),
          ],
        ),

練習(xí)demo，鏈接https://gitee.com/xgljh/Flutter

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容