感君一回顾,思君朝与暮。
<一>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", ), ], ), ); }