共计 5423 个字符，预计需要花费 14 分钟才能阅读完成。
Flutter 学习第十三课：文本组件 Text
一：文本组件 Text
// 文本
const Text(
String this.data, {//data 必填项文本信息
Key? key,
this.style,// 文本款式
this.strutStyle,// 文本字体款式
this.textAlign,// 文本应如何程度对齐
this.textDirection,// 绝对 TextAlign 中的 start、end 而言有用（当 start 应用了 ltr 相当于 end 应用了 rtl，也相当于 TextAlign 应用了 left）this.locale,
this.softWrap,// 某一行中文本过长，是否须要换行。默认为 true，this.overflow,// 如何解决视觉溢出 //TextOverflow.fade: 将溢出的文本淡化为通明。TextOverflow.clip: 剪切溢出的文本以修复其容器。TextOverflow.ellipsis: 应用省略号示意文本已溢出。this.textScaleFactor,// 每个逻辑像素的字体像素数
this.maxLines,// 本要逾越的可选最大行数
this.semanticsLabel,
this.textWidthBasis,
this.textHeightBehavior,
}) : assert(
data != null,
'A non-null String must be provided to a Text widget.',
),
textSpan = null,
super(key: key);
// 富文本
const Text.rich(
InlineSpan this.textSpan, {
Key? key,
this.style,
this.strutStyle,
this.textAlign,
this.textDirection,
this.locale,
this.softWrap,
this.overflow,// 如何解决视觉溢出 //TextOverflow.fade: 将溢出的文本淡化为通明。TextOverflow.clip: 剪切溢出的文本以修复其容器。TextOverflow.ellipsis: 应用省略号示意文本已溢出。this.textScaleFactor,//textScaleFactor 字体显示倍率
this.maxLines,//maxLines 文字显示最大行数
this.semanticsLabel,
this.textWidthBasis,
this.textHeightBehavior,
}) : assert(
textSpan != null,
'A non-null TextSpan must be provided to a Text.rich widget.',
),
data = null,
super(key: key);
文本款式属性 TextStyle
const TextStyle({
this.inherit = true,// 是否将 null 值替换为先人文本款式中的值（例如，在 TextSpan 树中）。如果为 false，则没有显式值的属性将复原为默认值：红色，字体大小为 10 像素，采纳无衬线字体。this.color,// 文本色彩。如果指定了 foreground，则此值必须为 null。如自定义色彩：Color.fromRGBO(155, 155, 155, 1) 也能够应用 Colors 类外面自带的属性
this.backgroundColor,// 文本的背景色彩
this.fontSize,// 字体大小，默认 14 像素
this.fontWeight,// 字体厚度，能够使文本变粗或变细
//FontWeight.bold 罕用的字体分量比失常重。即 w700
//FontWeight.normal 默认字体粗细。即 w400
//FontWeight.w100 薄，最薄
//FontWeight.w200 特轻
//FontWeight.w300 轻
//FontWeight.w400 失常 / 一般 / 平原
//FontWeight.w500 较粗
//FontWeight.w600 半粗体
//FontWeight.w700 加粗
//FontWeight.w800 特粗
//FontWeight.w900 最粗
this.fontStyle,// 字体格调：//FontStyle.italic 应用斜体
//FontStyle.normal 应用直立
this.letterSpacing,// 程度字母之间的空间距离（逻辑像素为单位）。能够应用负值来让字母更靠近。this.wordSpacing,// 单词之间增加的空间距离（逻辑像素为单位）。能够应用负值来使单词更靠近。this.textBaseline,// 对齐文本的水平线:
//TextBaseline.alphabetic：文本基线是规范的字母基线
//TextBaseline.ideographic：文字基线是表意字基线；// 如果字符自身超出了 alphabetic 基线，那么 ideograhpic 基线地位在字符自身的底部。this.height,// 文本行与行的高度，作为字体大小的倍数（取值 1~2，如 1.2）this.leadingDistribution,
this.locale,
this.foreground,
this.background,
this.shadows,// 文本的暗影能够利用列表叠加解决，例如 shadows: [Shadow(color:Colors.black,offset: Offset(6, 3), blurRadius: 10)], color 即暗影的色彩，offset 即暗影绝对文本的偏移坐标，blurRadius 即暗影的含糊水平，越小越清晰
this.fontFeatures,
this.decoration,// 文字的线性装璜，比方 TextDecoration.underline 下划线，//TextDecoration.lineThrough 删除线
this.decorationColor,// 文本装璜线的色彩
this.decorationStyle,// 文本装璜线的格调
this.decorationThickness,
this.debugLabel,
String? fontFamily,
List<String>? fontFamilyFallback,
String? package,
this.overflow,
}) : fontFamily = package == null ? fontFamily : 'packages/$package/$fontFamily',
_fontFamilyFallback = fontFamilyFallback,
_package = package,
assert(inherit != null),
assert(color == null || foreground == null, _kColorForegroundWarning),
assert(backgroundColor == null || background == null, _kColorBackgroundWarning);textAlign
文本应如何程度对齐 enum：
| 可选值 | 阐明 |
|---|---|
| TextAlign.center | 将文本对齐容器的核心 |
| TextAlign.end | 对齐容器后缘上的文本 |
| TextAlign.start | 对齐容器前缘上的文本 |
| TextAlign.justify | 拉伸以完结的文本行以填充容器的宽度。即应用了 decorationStyle 才起效 |
| TextAlign.left | 对齐容器左边缘的文本 |
| TextAlign.right | 对齐容器右边缘的文本 |
栗子：
return Scaffold(
body: Center(
child: Text("人生，是一条漫长的路。无论是阳关大道，还是康庄大道；无论是春花烂漫的日子，还是冬雪纷飞的节令；咱们都要一路心存美妙和心愿，不卑不亢，不急不躁，长长的路，缓缓地走得之我幸，失之我命，有些时候，有些货色，不属于咱，就未必永远不属于咱，不要去争，不必去抢，让冥冥之中的浩瀚轨迹来预订。淡泊明志，能力宁静致远。",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,// 字体厚度
fontStyle: FontStyle.italic,// 斜体
color: Color.fromRGBO(155, 155, 155, 1),// 字体色彩
height: 2,// 文本行与行的高度，作为字体大小的倍数（取值 1~2，如 1.2）decoration: TextDecoration.underline,// 下划线
decorationColor: Colors.orange,
decorationStyle: TextDecorationStyle.dashed// 虚线
),
textAlign: TextAlign.center,// 对齐形式，居中对齐
),
),
); 在下面的例子中，Text 的所有文本内容只能按同一种款式，如果咱们须要对一个 Text 内容的不同局部依照不同的款式显示，这时就能够应用 TextSpan，它代表文本的一个“片段”。咱们看看 TextSpan 的定义:
TextSpan 用于指定文本片段的格调及手势交互
const TextSpan({
this.text,// 显示文本的组件
this.children,//// 子组件
TextStyle? style,// 文本的款式
this.recognizer,// 指定手势交互
recognizer: TapGestureRecognizer()..onTap = () {}, 能够监听点击事件
MouseCursor? mouseCursor,
this.onEnter,
this.onExit,
this.semanticsLabel,
this.locale,
this.spellOut,
}) : mouseCursor = mouseCursor ??
(recognizer == null ? MouseCursor.defer : SystemMouseCursors.click),
assert(!(text == null && semanticsLabel != null)),
super(style: style);栗子：
return Scaffold(
body: Center(
child: RichText(
textScaleFactor: 5,// 字体显示倍率
overflow: TextOverflow.fade,//TextOverflow.fade: 将溢出的文本淡化为通明。TextOverflow.clip: 剪切溢出的文本以修复其容器。TextOverflow.ellipsis: 应用省略号示意文本已溢出。textDirection: TextDirection.ltr,
textAlign: TextAlign.left,// 对齐形式
text: TextSpan(
children: [
TextSpan(
text: "保障不对外公开或向第三方提供单个用户的注册材料及用户在应用网络服务时存储",
style: TextStyle(color: Colors.black,),
recognizer: TapGestureRecognizer()..onTap = () {}),
TextSpan(text: "平安协定",
style: TextStyle(color: Colors.red,),
// 点击事件
recognizer: TapGestureRecognizer()..onTap = () {print("点击了平安协定");
})
]
),
),
),
)
-----------------------------------------------------
// 另一种形式实现父文本文本组装应用 Text.rich()
//InlineSpan 是默认必须得加的
InlineSpan span = TextSpan(children: [
TextSpan(
text: "保障不对外公开或向第三方提供单个用户的注册材料及用户在应用网络服务时存储",
style: TextStyle(color: Colors.black,),
recognizer: TapGestureRecognizer()..onTap = () {}),
TextSpan(
text: "平安协定",
style: TextStyle(color: Colors.red,),
// 点击事件
recognizer: TapGestureRecognizer()
..onTap = () {print("点击了平安协定");
})
]);
return Scaffold(
body: Center(
child: Text.rich(
span,
textScaleFactor: 5,
// 字体显示倍率
overflow: TextOverflow.fade,
//TextOverflow.fade: 将溢出的文本淡化为通明。TextOverflow.clip: 剪切溢出的文本以修复其容器。TextOverflow.ellipsis: 应用省略号示意文本已溢出。textDirection: TextDirection.ltr,
textAlign: TextAlign.left, // 对齐形式
),
),
);TextRich 实现富文本和 Text.rich() 都能实现富文本
正文完
