美文网首页
Flutter-Text(UILabel)

Flutter-Text(UILabel)

作者: 今晚月色 | 来源:发表于2019-04-01 16:48 被阅读0次
    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:波浪线
    示例图

    相关文章

      网友评论

          本文标题:Flutter-Text(UILabel)

          本文链接:https://www.haomeiwen.com/subject/uenvbqtx.html