一、介绍
显示文本字符串的组件
二、创建text的源码
const Text(
this.data, {
Key key,
this.style,
this.strutStyle,
this.textAlign,
this.textDirection,
this.locale,
this.softWrap,
this.overflow,
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);
三、属性学习
输入的文本
文本样式,style属性如下
const TextStyle({
this.inherit = true,//为false的时候不显示
this.color,// 文本颜色,不可和foreground同时使用
this.backgroundColor,// 背景色
this.fontSize,// 字体大小,默认14
this.fontWeight,//字体宽度,默认为w400
this.fontStyle,// 字体样式,粗体、斜体
this.letterSpacing,// 字符间距,可以为负数
this.wordSpacing,// 字间距,可以为负数
this.textBaseline,// 文本基准线
this.height,// 文本的行高
this.locale,
this.foreground,// 文本前景色,不可和color同时使用
this.background,// 文本背景色
this.shadows, // 文本阴影
this.fontFeatures,
this.decoration,// 添加上划线,下划线,删除线
this.decorationColor,// 上划线,下划线,删除线的颜色
this.decorationStyle,// 上划线,下划线,删除线的样式:可控制画实线,虚线,两条线,点, 波浪线等
this.decorationThickness,
this.debugLabel,
String? fontFamily,//字体
List<String>? fontFamilyFallback,
String? package,
})
允许设置最小线高的功能
文本对齐方式
属性 | 说明 |
---|---|
TextAlign.center | 将文本对齐容器的中心 |
TextAlign.start | 对齐容器前缘上的文本 |
TextAlign.end | 对齐容器后缘上的文本 |
TextAlign.left | 对齐容器左边缘的文本 |
TextAlign.right | 对齐容器右边缘的文本 |
TextAlign.justify | 拉伸以结束的文本行以填充容器的宽度 |
文本的方向
属性 | 说明 |
---|---|
TextAlign.ltr | 文本从左向右流动 |
TextAlign.rtl | 文本从右向左流动 |
用于选择区域特定字形的语言环境(很少使用)
某一行中文本过长,是否需要换行。默认为true
文本溢出的显示效果
属性 | 说明 |
---|---|
TextOverflow.clip | 剪切溢出的文本填满容器 |
TextOverflow.fade | 将溢出的文本淡化为透明 |
TextOverflow.ellipsis | 使用省略号表示文本已溢出 |
TextOverflow.visible | 呈现容器外溢出的文本 |
每个逻辑像素的字体像素数,默认值为1.0(假如文字大小为10.0,textScaleFactor设置为1.5,那么文字大小为15.0,textScaleFactor设置为3.0,文字大小为30.0)
文本最大行数
图像的语义描述,很少用到
一行或多行文本宽度的不同方式
属性 | 说明 |
---|---|
TextWidthBasis.parent | 多行文字将占据父文本给定的全宽,单行文本仅包含文本所需的最小宽度。(段落) |
TextWidthBasis.longestLine | 宽度刚好能容纳最长的一行(聊天气泡) |
定义如何应用第一行的ascent和最后一行的descent
(整理出来,方便个人查找和学习)
网友评论