1. Text 文本
Text组件用于显示简单的文本样式,包换控制文本显示样式的一些属性
1.1 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,
})
1.2 必传参数
Text组件中,data参数是必选参数, 为Text文本组件将要显示的文本内容
Text(
"你好,Flutter"
)
显示的内容:
Text组件文本_图1.png
这样内容给就渲染出来了
也可以将文本多次渲染
Text(
"你好,Flutter"*3
)
显示结果:
多次渲染内容_图2.png
那么接下来就一些看看可选参数中一些比较常用的参数吧:
2. Text组件常用的参数
Text组件常用参数罗列
| 名称 | 功能 |
|---|---|
| textAlign | 文本对齐方式: center: 居中 left: 左对齐 right: 右对齐 justify: 两端对齐 |
| maxLines | 文字显示最大行数 |
| overflow | 文字超出屏幕之后的处理方式: clip: 裁剪 fade: 渐隐 ellipsis: 省略号 |
| textScaleFactor | 字体显示倍率 |
| textDirection | 文本方法 ltr : 从左至右 rtl: 从右至左 |
| style | 字体的样式设置,值为TextStyle |
2.1 textAlign参数
textAlign参数说明:
-
textAlign：文本的对齐方式；可以选择左对齐、右对齐还是居中。 - 对齐的参考系是Text widget本身。
- 如果文本内容长度和Text宽度一样,指定对齐方式将毫无意义
示例:
Text(
"你好,Flutter"*6, // 文本内容
textAlign: TextAlign.center // 文本居中对齐
)
显示结果:
文本居中对齐_图3.png
此时文本内容就居中对齐了
注意:
- 如果是单行文字, 在设置文本对齐方式的时候可能没有效果,
- 在下这么理解的,Text组件有点像像HTML中的文本标签, 属于行内元素,本身具有包裹性,收缩性
- 因此默认情况下Text宽度是由内容撑开的, 因此单独定义对齐方式感觉不出来效果
- 所以我们在示例中,将文字内容增多,换行,这样Text宽度就会被第一行文字撑开,
- 此时设置对齐方式,第二行文本就会有效果
2.2 maxLines与overflow参数
maxLines参数用来指定文本显示行数, 默认所有的文本都会自动换行
overflow参数用来指定当文本内容超过了maxLines,超过的部分如何显示,默认是截取
示例:
默认文本显示
Text(
"你好,Flutter"*12, // 文本内容
)
显示结果:
自动换行_图4.png
指定文本显示行数
Text(
"你好,Flutter"*12, // 文本内容
maxLines: 2, // 指定文本行数
)
显示结果:
限制文本行数_图5.png
指定文本超出显示方式
Text(
"你好,Flutter"*12, // 文本内容
maxLines: 2, // 指定文本行数
overflow: TextOverflow.ellipsis, // 文本超出显示样式, 这里设置为...
)
显示结果
文本隐藏方式_图6.png
2.3 textScaleFactor
textScaleFactor: 设置相较于当前本子大小的的缩放因子(倍数),默认为1
示例:
Text(
"你好,Flutter", // 文本内容
textScaleFactor: 3 // 字体放大3倍
)
显示结果:
字体放大倍数_图7.png
说明:
相较于style属性设置文本样式时设置文字大小,textScaleFactor只是一种快捷方式而已
2.4 type 参数
type: 用于设置文本样式, type的值也是一个组件,是TextStyle类
接下来就好好看看TextStyle类
3. TextStyle 样式
TextStyle用于指定文本显示的样式如颜色、字体、粗细、背景等。
3.1 TextStyle样式源码中所有的参数
const TextStyle({ // 所有的参数都是可选参数
this.inherit = true,
this.color,
this.backgroundColor,
this.fontSize,
this.fontWeight,
this.fontStyle,
this.letterSpacing,
this.wordSpacing,
this.textBaseline,
this.height,
this.locale,
this.foreground,
this.background,
this.shadows,
this.fontFeatures,
this.decoration,
this.decorationColor,
this.decorationStyle,
this.decorationThickness,
this.debugLabel,
String fontFamily,
List fontFamilyFallback,
String package,
})
一样,我们只看一些比较常用的, 如常用的在使用到了在回头来研究
3.2 TextStyle 样式常用的参数
| 名称 | 功能 |
|---|---|
| decoration | 文字装饰线 none: 空 lineThrough: 删除线 overline: 上划线 underline: 下划线 |
| decorationColor | 文字装饰线的颜色 |
| decorationStyle | 文字装饰线的风格 ([dashed,dotted]): 虚线 double: 双线 solid: 实线 wavy: 波浪线 |
| wordSpacing | 单词间隙(如果是负值,会让单词变得更紧凑) |
| letterSpacing | 字母间隙(如果是负值,会让字母变得更紧凑) |
| fontStyle | 文字样式: italic: 斜体 normal: 正常 |
| fontSize | 字体大小 |
| color | 字体颜色 |
| fontWeight | 字体粗细: bold: 粗体 normal: 正常 |
| height | 行高 |
3.3. 示例:
代码:
Text(
"你好,Flutter", // 文本内容
style:TextStyle(
fontSize: 30.0, // 浮点型数字
height: 1.2 , // 行高1.2倍
fontFamily: "Courier" , // 字体类型
fontWeight: FontWeight.bold, // 文字粗体
decoration: TextDecoration.underline, // 文本修饰线
decorationStyle: TextDecorationStyle.dashed, // 修饰线风格
decorationColor: Colors.pink, // 修饰线颜色
letterSpacing: 10, // 文字间距
)
)
显示结果:
文本样式设置_图8.png
3.4 一些参数的注意项
-
height: 用于指定行高，但它并不是一个具体行高的绝对值,而是一个文字大小的倍数 -
fontFamily：不同平台默认支持的字体集不同，因此指定字体时一定要先测试不同的平台显示。 -
fontSize：该属性和Text的textScaleFactor都用于控制字体大小。区别在于-
fontSize可以精确指定字体大小，而textScaleFactor只能通过缩放比例来控制。 -
textScaleFactor主要是对Flutter应用字体进行全局调整，而fontSize通常用于单个文本，字体大小
-