感君一回顾,思君朝与暮。
<一>Text类似iOS中的UILabel控件
Text 属性 | 介绍 |
---|---|
style | TextStyle 对象,最常用属性,详情见下方表格 |
strutStyle | 字体在文本内的一些偏移,使用时 style 属性必须有值,很少使用 |
textAlign | 对齐方式:left、start、right、end、center、justify |
textDirection | TextDirection.ltr:从左到右、TextDirection.rtl:从右到左 |
locale | 区域设置,基本不会用 |
softWrap | 是否自动换行 |
overflow | 超出部分截取方式,clip->直接截取,fade->渐隐,ellipsis->省略号 |
textScaleFactor | 字体缩放 |
maxLines | 最多显示行数 |
semanticsLabel | 语义标签,如文本为"$$",这里设置为"双美元" |
textWidthBasis | 测量行宽度 |
textHeightBehavior | 官方备注: 定义如何应用第一行的ascent和最后一行的descent |
TextStyle属性
TextStyle 属性 | 介绍 |
---|---|
inherit | 是否继承父类 |
color | 字体颜色 |
backgroundColor | 背景色 |
fontSize | 字体大小 |
fontWeight | 字体加粗 |
fontStyle | 系统字体 |
fontFamily | 字体 |
letterSpacing | 字母间距 |
wordSpacing | 单词间距 |
textBaseline | 字体基线,有兴趣的可以单独了解,flex 布局中会有一种baseline,不常用 |
height | 高度 |
locale | 区域设置 |
foreground | 前置层 |
background | 背景层 |
shadows | 阴影 |
fontFeatures | 指定字体的多种变体 |
decoration | 文字划线:上,中,下 |
decorationColor | 划线颜色 |
decorationStyle | 划线样式:虚线,单线,双线 |
decorationThickness | 线宽,默认1.0 |
debugLabel | 仅在 debug 模式下有用 |
<二>#代码
- 正常文本
Text _normalText(){ return const Text( "Hello World", textDirection: TextDirection.ltr, textAlign: TextAlign.center, softWrap: true, maxLines: 2, overflow: TextOverflow.ellipsis, style: TextStyle( fontSize: 50, color: Colors.red, decoration: TextDecoration.underline, decorationColor: Colors.yellow, decorationStyle: TextDecorationStyle.double, ), ); }
- 富文本
Text _richText(){ return Text.rich( TextSpan( text: "Just ", style: const TextStyle( fontSize: 30, ), children: [ TextSpan( text: "taps here", style: TextStyle( fontSize: 40, color: Colors.blue ), recognizer: TapGestureRecognizer() ..onTap = (){ print("点击了"); } , ), const TextSpan( text: " one more time", ), ], ), ); }