美文网首页Flutter入门实践
006.0 flutter中的StrutStyle是什么

006.0 flutter中的StrutStyle是什么

作者: 码农二哥 | 来源:发表于2020-03-28 20:24 被阅读0次

说明:几乎整个内容都是抄的,理解一下就好,原文参考处有链接。

先来理解一下这张图(字体)

image.png
  • The ascent is the distance from the baseline to the top of the text (as defined by the font, not any particular glyph)---绿色部分
  • The decent is the distance from the baseline to the bottom of the text (as defined by the font, not any particular glyph)---粉色部分
  • The leading (pronounced "ledding", as in the the lead metal that the old typesetters used to use between lines of type) is the distance between the bottom of one line and the top of the next(也就是说上下两行之间的间距). In the strut, half of the leading is put on top and half one bottom(在strut中,leading被拆成了两部分,上下个一半). The is the gray area in the illustration.

解释

  • The colored rectangle on the left is the strut (although in actuality a strut has no width).
  • The height of that rectangle is the minimum line height. The line can't be any shorter than that. But it can be taller.(也就是说高度没办法调整的再小了?)

如何控制这个高度呢?


You can change the vertical size of the strut by using a multiplier.

  • In the StrutStyle class, the height parameter is the multiplier for the ascent and the descent(绿色和粉色的部分). In the illustration the height is approximately 1.7, making the green ascent and the pink descent proportionally larger than in the original image.
  • The leading height multiplier can be controlled separately. You use the leading parameter to set it. I used the same multiplier as for the ascent and descent, though. The baseline stays the same.
const Text(
  'My text',            // use 'My text \nMy text' to see multiple lines
  style: TextStyle(
    fontSize: 10,
    fontFamily: 'Roboto',
  ),
  strutStyle: StrutStyle(
    fontFamily: 'Roboto',
    fontSize: 14,
    height: 1.7,
    leading: 1.7,
  ),
),
image.png

参考

相关文章

  • 006.0 flutter中的StrutStyle是什么

    说明:几乎整个内容都是抄的,理解一下就好,原文参考处有链接。 先来理解一下这张图(字体) The ascent i...

  • Flutter Text 文字上下不居中

    Flutter Text文本有时候出现不居中的情况,添加StrutStyle属性 关键代码

  • Flutter学习笔记 (一)

    (一)初识Flutter 1.Flutter是什么 Flutter is Google's UI toolkit ...

  • 01-Flutter介绍

    Flutter 介绍 Flutter 是什么? Flutter 是 Google 开源的 UI 工具包,帮助开发者...

  • 吹吹Flutter

    一、Flutter是什么 首先,我们来思考一下,Flutter是什么 ?用谷歌大大的话来说,Flutter是一个U...

  • Flutter微介绍

    Flutter是什么? Flutter是谷歌的移动UI框架。使用Dart语言开发。 Flutter的作用: 可以在...

  • 一、初识Flutter

    Flutter是什么? Flutter is Google's UI toolkit for building b...

  • 一.Flutter简介和环境搭建

    Flutter是什么? Flutter is Google's UI toolkit building beaut...

  • Flutter是什么

    1.1 Flutter是什么 1.1.1 Flutter简介 Flutter是谷歌的移动UI框架,可以快速在iOS...

  • Flutter 之Text、TextSpan

    Text组件常用属性 属性描述data必填项 文本信息style文本的样式信息strutStyle文本字体的样式信...

网友评论

    本文标题:006.0 flutter中的StrutStyle是什么

    本文链接:https://www.haomeiwen.com/subject/hugsuhtx.html