認識Flutter組件篇之Text組件

Text組件是Flutter中最基礎的組件了，下面咱們就來認識一下Text組件

Text

它有兩種書寫方式:

1.
Text(
    'Hello,Flutter',
     textAlign: TextAlign.center,
    overflow: TextOverflow.ellipsis,
    style: TextStyle(fontWeight: FontWeight.bold),
)
複製代碼

這是text組件的默認寫法

2.
const Text.rich(
    TextSpan(
    text: 'Hello', // default text style
    children: <TextSpan>[
      TextSpan(text: ' beautiful ', style: TextStyle(fontStyle: FontStyle.italic)),
      TextSpan(text: 'world', style: TextStyle(fontWeight: FontWeight.bold)),
    ],
 ),
)
複製代碼

text組件的構造函數有一個rich方法，能夠用來使用TextSpan來展現不一樣樣式的段落

固然你能夠去給這些文字去綁定上事件交互 可是這篇文章我只想談論佈局展示 (由於我也沒有實踐過等我實踐了在補充上~) 若是你想知道怎麼綁定交互事件能夠去 官方文檔去看一下

text組件有許多屬性咱們來認識那些最經常使用的

1. maxLines 文本最多顯示幾行，多餘的會被截斷

   

2. overflow 溢出狀況該如何處理

   它的值是一個TextOverflow的枚舉

   1. clip 剪切掉溢出的部分
   2. ellipsis 使用省略號表示文本已溢出

      

   3. fade 將溢出的文本淡化爲透明，這個透明是上下的能夠看到字的下面部分有點透明。

      

3. softWrap 文本是否換行，值是一個布爾值false不換號，true 換行

   

   

4. style 文本的樣式

   1. 透明度跟顏色

      

   2. color 顏色

   Color c = const Color(0xFF42A5F5);
   Color c = const Color.fromARGB(0xFF, 0x42, 0xA5, 0xF5);
   Color c = const Color.fromARGB(255, 66, 165, 245);
   Color c = const Color.fromRGBO(66, 165, 245, 1.0);
   複製代碼

   3. fontFamily 字體風格

   4. fontSize 字體大小

   5. fontWeight 字體粗細

   6. decoration 文本附近的裝飾有以下值

      TextDecoration.lineThrough

      

      TextDecoration.overline

      

      TextDecoration.underline

      

   7. decorationColor 裝飾的顏色

      

   8. decorationStyle 裝飾的樣式

   9. TextDecorationStyle.dashed

      

   10. TextDecorationStyle.dotted

       

   11. TextDecorationStyle.wavy

       

   12. TextDecorationStyle.double

       

   13. letterSpacing 文字與文字之間的距離

       

   14. wordSpacing 每一個詞之間的距離用空格區分

       

   15. height 行高 字體大小的倍數

5. textAlign 文本對齊方式

   TextAlign.left

   TextAlign.right

   TextAlign.center

   TextAlign.justify

   TextAlign.start

   TextAlign.end

6. textDirection 文本方向

   TextDirection.ltr

   

   TextDirection.rtl

   

差很少就這些了還有一些其餘屬性我也不是很清楚怎麼用 若有大神望予補充~