Flutter-Text（UILabel）

Flutter

Text就是相对于iOS开发中的 UILabel，把与UILabel设置差别很大的点拎出来说明一下。

void main() => runApp(WudanUILabel());
class WudanUILabel extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
     return MaterialApp(
       title: 'Class Name',
       home: Scaffold(
         appBar: AppBar(title: Text('UILabel')),
         body: Center(
           child: Text(
             "Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。", // 内容
             maxLines: 2, // 最大显示行数，默认为最大
             textAlign: TextAlign.left, // 对齐方式
             overflow: TextOverflow.ellipsis, // 文字显示不全样式
             style: TextStyle( // 字体样式
               color: Colors.pink, // 颜色
               fontSize: 18, // 大小
               decoration: TextDecoration.underline,       // 划线位置
               decorationStyle: TextDecorationStyle.solid // 划线样式
             ),
           ),
         ),
       ),
    );
  }
}

overflow属性

类似与UILabel中的lineBreakMode

• clip：直接切断，剩下的文字就没有了，感觉不太友好，体验性不好。
• ellipsis: 在后边显示省略号，体验性较好，这个在工作中经常使用。
• fade: 溢出的部分会进行一个渐变消失的效果，当然是上线的渐变。

decoration

类似于NSAttributedString制作的划线

• none：默认样式，什么都没有
• underline：下划线
• lineThrough：穿过文字中间
• overline：文字顶部

decorationStyle

划线的样式

• solid：实线
• double：双线
• dashed：虚线(大点)
• dotted：虚线(小点)
• wavy：波浪线

示例图