Flutter 之 Text 控件

Text 屬性

new Text(
         'You have pushed the button this many times:',
          textAlign: TextAlign.center,
          textDirection: TextDirection.ltr, 
          softWrap: false,
          overflow: TextOverflow.ellipsis,
          textScaleFactor: 2.0, 
          maxLines: 10,
         )
  • data,Text 控件的第一個屬性,指的是 Text 的文本

  • textAlign:文本對齊方式,分別有:
    TextAlign.left 文本左對齊
    TextAlign.right 文本右對齊
    TextAlign.center 文本居中
    TextAlign.justify 文本兩端對齊
    TextAlign.start 同 TextAlign.left
    TextAlign.end 同 TextAlign.right

  • textDirection 文本方向,分別有
    TextDirection.ltr 從左到右
    TextDirection.rtl 從右到左

  • softWrap 是否換行處理,如為 false,超出屏幕做截斷處理

  • overflow 文字超出屏幕之后的處理方式
    TextOverflow.clip 截斷處理
    TextOverflow.fade 超出透明化
    TextOverflow.ellipsis 省略號處理

  • textScaleFactor 字體縮放大小

  • maxLines 限制行數(shù)

  • style 屬性

      style: TextStyle(
                inherit: true,
                color: const Color(0xff000000),
                backgroundColor: Colors.white,
                fontSize: 32, 
                fontWeight: FontWeight.w900, 
                fontStyle: FontStyle.italic, 
                letterSpacing: 4.0, 
                wordSpacing: 6.0, 
                textBaseline: TextBaseline.ideographic,
                height: 1,
                locale:const Locale('en', 'US'),
               // foreground: paint,
               // background:paint,
                shadows:[BoxShadow(color: Colors.grey, offset: Offset(-1, -1), blurRadius: 5)],
                decoration:TextDecoration.lineThrough,
                decorationColor:Colors.blue,
                 decorationStyle:TextDecorationStyle.double,
                decorationThickness:2.0,
                debugLabel:"label",
                fontFamily:"DIN_Medium.ttf",
                //fontFamilyFallback:,
                package:"assets/fonts",
              ),
  1. inherit 未設(shè)置屬性是否繼承父節(jié)點樣式
  2. color 字體顏色
  3. backgroundColor 背景顏色
  4. fontSize 字體大小,單位為 pt 或 sp ,默認(rèn) 14 sp
  5. fontWeight 字體的粗細(xì),正常 (FontWeight.w400) 和粗體
  6. fontStyle 字體樣式,正常和斜體
  7. letterSpacing 字符之間的間距倍數(shù)
  8. wordSpacing 單詞間隙
  9. textBaseline 對齊表意文字的水平線
  10. height 字體的倍數(shù)
  11. locale 多國語言設(shè)置
  12. foreground 通過 Paint 來設(shè)置字體的顏色,color 和 foreground 不能同時設(shè)置
  13. background 通過Paint來設(shè)置字體的背景顏色,backgroundColor 和 background 不能同時設(shè)置
  14. shadows 文字陰影
  15. decoration TextDecoration.none 沒有 TextDecoration.underline 下劃線TextDecoration.overline 上劃線TextDecoration.lineThrough 中間的線(刪除線)
  16. decorationColor 劃線的顏色
  17. decorationStyle 劃線的樣式 TextDecorationStyle.solid 實線 TextDecorationStyle.double 畫兩條線 TextDecorationStyle.dotted 點線(一個點一個點的)TextDecorationStyle.dashed 虛線(一個長方形一個長方形的線)TextDecorationStyle.wavy 正玄曲線
  18. decorationThickness 劃線粗細(xì)的寬度
  19. debugLabel 調(diào)試標(biāo)簽
  20. fontFamily 字體名稱
  21. fontFamilyFallback 文字字體列表,如果前面的 fontFamily 提供了,以fontFamily 為準(zhǔn),如果沒有提供,則使用該列表第一個元素作為字體,都沒提供則使用默認(rèn)字體
  22. package 文字字體路徑

Text.rich 屬性

和Text相比多出一個textSpan

new TextSpan(
                text: 'Hello Flutter',
                style: new TextStyle(
                  color: Colors.black,
                  fontSize: 15.0,
                  decoration: TextDecoration.none,
                ),
                children: <TextSpan>[
                  new TextSpan(
                    text: 'TextSpan',
                    style: new TextStyle(
                      color: Colors.blue,
                    ),
                    recognizer:new TapGestureRecognizer()..onTap = () {
                      //點擊具體事件處理
                      print("TapGestureRecognizer");
                    }
                  ),
                ],
              ),

這里有個 .. 的 Dart 語法,這是以前沒見過的,查看文檔,這種叫

Cascade notation (..)(級聯(lián)操作符)

級聯(lián)操作符 (..) 可以在同一個對象上 連續(xù)調(diào)用多個函數(shù)以及訪問成員變量。 使用級聯(lián)操作符可以避免創(chuàng)建 臨時變量。

Text 點擊事件

Text 點擊事件需要借助 GestureDetector

new GestureDetector(
              child: new Text(
                '$_counter',
                textAlign: TextAlign.justify,//對齊方式
                textDirection:TextDirection.ltr,
                style: Theme.of(context).textTheme.display1,
              ),
              onTap: ()  {
                print("Text");
              },
            )

這樣在 onTap 里面就可以處理點擊事件了,另外還有 onDoubleTap 和 onLongPress 等等手勢操作事件。

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

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

  • Text Widget “文本”小組件顯示單個樣式的文本字符串。字符串可能會跨越多行,也可能全部顯示在同一行上,具...
    飛羽_ifeiyv閱讀 895評論 0 2
  • 前言 學(xué)習(xí)本系列內(nèi)容需要具備一定 HTML 開發(fā)基礎(chǔ),沒有基礎(chǔ)的朋友可以先轉(zhuǎn)至 HTML快速入門(一) 學(xué)習(xí) 本人...
    珍此良辰閱讀 38,066評論 5 19
  • 文字顯示控件 Text, Text.rich Text 相關(guān)屬性: Text.rich 相關(guān)屬性: 很明顯這兩個控...
    leowwh閱讀 13,421評論 10 7
  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,530評論 1 41
  • 丫頭的幺弟昨日被山上的土匪亂刀砍死了,只是因為他的生辰禮物被看上,他卻不給,便慘遭此等禍?zhǔn)隆?丫頭領(lǐng)著幺弟的新衣裳...
    姜小頌頌也二喜閱讀 383評論 0 0

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