flutter应用开发中文本样式 TextStyle 篇

题记
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，即是折腾每一天。

重要消息

精通点的可以查看这里精述
Flutter 从入门实践到开发一个APP之UI基础篇视频
flutter从入门到精通系列文章

一句话描述 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。