认识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

   

差很少就这些了还有一些其余属性我也不是很清楚怎么用 若有大神望予补充~