题记
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，即是折腾每一天。
重要消息
一句话描述 TextStyle ，TextStyle 是用来设置 Text、TextFeild 中文本的样式的。
TextField 系列文章
- TextField的基本使用以及TextField常用属性精讲《点击查看详情》
- TextField 焦点获取控制篇《点击查看详情》
- TextField 输入文本样式 TextStyle 篇《正是本文章了》
- TextField 输入文本 textAlign 对齐分析篇《点击查看详情》
- TextField 输入文本 decoration 配置边框样式以及提示文本分析篇《点击查看详情》
- TextField TextEditingController 分析篇《点击查看详情》
1 引言
在 flutter应用程序开发中，TextField 组件用于输入文本，Text 组件用于显示文本。
文本输入框 TextField 的 decoration 设置
InputDecoration 来配置不同的边框样式与提示文本文字等，通过 style 属性设置 TextStyle 来配置输入文本的样式。
用于文本显示的组件 Text 同样也是通过 style 属性来设置 TextStyle 样式来配置显示文本的样式的。
2 TextStyle 的常用属性配置
TextStyle buildCommonStyle() {
return TextStyle(
textBaseline: TextBaseline.alphabetic,
///设置文字的颜色
color: Colors.deepPurple,
///设置文字的大小
fontSize: 16.0,
///用设置 Text 的线
/// TextDecoration.none 没有
/// TextDecoration.underline 下划线
/// TextDecoration.overline 上划线
/// TextDecoration.lineThrough 删除线
decoration: TextDecoration.none,
/// 设置下划线的颜色
decorationColor: Colors.green,
/// 设置下划线的样式
/// TextDecorationStyle.dashed 设置为虚线
/// TextDecorationStyle.solid 设置为实线
/// TextDecorationStyle.double 两条实线
/// TextDecorationStyle.wavy 波浪线
decorationStyle: TextDecorationStyle.wavy,
///设置文字为粗体
/// FontWeight.bold 粗体
fontWeight: FontWeight.w600,
///设置 斜体
fontStyle: FontStyle.normal,
///用来设置 单字之间的距离
letterSpacing: 1.0,
///用来设置 单词之间的距离
wordSpacing: 2.0,
///控制行高 倍数（默认行高的倍数）乘以fontSize做为行高
height: 1.2,
///文本的背景颜色
backgroundColor: Colors.grey,
///Decoration背景设定// shadows:
);
}
3 TextStyle textBaseline 属性来配置文本基线
textBaseline 属性设置或返回在绘制文本时的当前文本基线。
下面的图示演示了 textBaseline 属性支持的各种基线：
| 值 | 描述 |
|---|---|
| alphabetic | 默认。文本基线是普通的字母基线。 |
| top | 文本基线是 em 方框的顶端。。 |
| hanging | 文本基线是悬挂基线。 |
| middle | 文本基线是 em 方框的正中。 |
| ideographic | 文本基线是表意基线。 |
| bottom | 文本基线是 em 方框的底端。 |
在 flutter 应用开发中，TextStyle 中通过 textBaseline 来配制基线，不过在 flutter 中 的 TextStyle 只支持 alphabetic 与 ideographic 这两种，一般这两种取值对于文字的对齐来讲只有微动，不同的是（可通过上图观察出来）alphabetic 设置的是文本基线参照英文，而 ideographic 设置的是文本基线参照中文。
flutter 中 textBaseline 的取值通过 TextBaseline 枚举来定义。
/// A horizontal line used for aligning text.enum TextBaseline {
/// The horizontal line used to align the bottom of glyphs for alphabetic characters.
alphabetic,
/// The horizontal line used to align ideographic characters.
ideographic,}
4 TextStyle fontWeight
属性设置文本的粗细,在 flutter 应用开发中 ,fontWeight 的取值定义在 FontWeight 类中
| 值 | 描述 |
|---|---|
| normal | 默认值。定义标准的字符。 |
| bold | 定义粗体字符。 |
| w100 - w900 | 定义由细到粗的字符。400 等同于 normal，而 700 等同于 bold。 |