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()都能实现富文本
发表回复