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

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

重要消息


一句话描述 TextStyle ,TextStyle 是用来设置 Text、TextFeild 中文本的样式的。


TextField 系列文章

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。
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

早起的年轻人

创作源于分享

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值