Flutter的文字高度及行高简单计算


行高度简单示意图

以RichText为例,可以通过设置style以及strutStyle共同作用文字的样式,

一、其中当仅设置style时:

  1. 当height不为空

字体及行高 = fontSize*height

  1. 当height为空

字体及行高 取决于 字体的量度及其字体大小

如下为官网对height和行高关系的解释

复制代码
 /// When [height] is null or omitted, the line height will be determined
/// by the font's metrics directly, which may differ from the fontSize.
/// When [height] is non-null, the line height of the span of text will be a
/// multiple of [fontSize] and be exactly `fontSize * height` logical pixels
/// tall.

如下为字体规格和行高的关系示意图

如果此时设置字体的背景 则背景的高度和字体的高度及行高都一致

一、当仅设置strutStyle时:

flutter的struct概念可参考en.wikipedia.org 及 CSS的行高概念Visual formatting model details

它的作用可以简单的理解为在每一行开始的地方插入一个没有宽度 和strutStyle定义的高度相同的字符。如果text中的字符高度小于strutStyle的高度则以strutStyle高度为最终值,如果大于strutStyle的高度,则不受影响正常布局。strutStyle定义了行的最小高度,

但是若strutStyle定义forceStrutHeight为true,则所有的字符样式都使用strutStyle规定的高度

strutStyle的高度

计算公式为:

fontSize * height + fontSize * leading

参考:

https://api.flutter.dev/flutter/painting/TextStyle-class.html

https://api.flutter.dev/flutter/painting/StrutStyle-class.html

https://en.wikipedia.org/wiki/Strut_(typesetting)

https://www.w3.org/TR/CSS2/visudet.html#line-height

相关推荐
铅笔侠_小龙虾18 分钟前
Flutter 安装&配置
flutter
mocoding1 小时前
使用已经完成鸿蒙化适配的Flutter本地持久化存储三方库shared_preferences让你的应用能够保存用户偏好设置、缓存数据等
flutter·华为·harmonyos·鸿蒙
无熵~3 小时前
Flutter入门
flutter
hudawei9963 小时前
要控制动画的widget为什么要with SingleTickerProviderStateMixin
flutter·mixin·with·ticker·动画控制
jian110585 小时前
flutter dio 依赖,dependencies 和 dev_dependencies的区别
flutter
王码码20355 小时前
Flutter for OpenHarmony 实战之基础组件:第十七篇 滚动进阶 ScrollController 与 Scrollbar
flutter·harmonyos
小哥Mark5 小时前
Flutter开发鸿蒙年味 + 实用实战应用|春节祝福:列表选卡 + 贴纸拖动 + 截图分享
flutter·harmonyos·鸿蒙
王码码20356 小时前
Flutter for OpenHarmony 实战之基础组件:第十六篇 约束布局 ConstrainedBox 与 AspectRatio
flutter·harmonyos
王码码20356 小时前
Flutter for OpenHarmony 实战之基础组件:第十八篇 布局终极者 CustomScrollView 与 Slivers
flutter·harmonyos
ujainu6 小时前
Flutter + OpenHarmony 实战:构建清晰、健壮的三屏状态流转
flutter·游戏·openharmony