带你深入理解 FLUTTER 中的字体“冷”知识

最新推荐文章于 2023-03-07 17:55:35 发布
最新推荐文章于 2023-03-07 17:55:35 发布
阅读量276 收藏 1
点赞数 1
分类专栏： flutter
原文链接：https://www.freesion.com/article/2077773939/
版权

本篇将带你深入理解 Flutter 开发过程中关于字体和文本渲染的“冷”知识，帮助你理解和增加关于 Flutter 中字体绘制的“无用”知识点。

毕竟此类相关的内容太少了

首先从一个简单的文本显示开始，如下代码所示，运行后可以看到界面内出现了一个 H 字母，它的fontSize是 100，Text被放在一个高度为 200 的Container中，然后如果这时候有人问你：Text显示 H 字母需要占据多大的高度，你知道吗？

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Container(
        color: Colors.lime,
        alignment: Alignment.center,
        child: Container(
          alignment: Alignment.center,
          child: Container(
            height: 200,
            alignment: Alignment.center,
            child: new Row(
              children: <Widget>[
                Container(
                  child: new Text(
                    "H",
                    style: TextStyle(
                      fontSize: 100,
                    ),
                  ),
                ),
                Container(
                  height: 100,
                  width: 100,
                  color: Colors.red,
                )
              ],
            ),
          )

        ),
      ),
    );
  }

在这里插入图片描述

一、TEXTSTYLE

如下代码所示，为了解答这个问题，首先我们给 Text 所在的 Container 增加了一个蓝色背景，并增加一个 100 * 100 大小的红色小方块做对比。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Container(
        color: Colors.lime,
        alignment: Alignment.center,
        child: Container(
          alignment: Alignment.center,
          child: Container(
            height: 200,
            alignment: Alignment.center,
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(
                  color: Colors.blue,
                  child: new Text(
                    "H",
                    style: TextStyle(
                      fontSize: 100,
                    ),
                  ),

                ),
                Container(
                  height: 100,
                  width: 100,
                  color: Colors.red,
                )
              ],
            ),
          )

        ),
      ),
    );
  }

结果如下图所示，可以看到 H 字母的上下有着一定的 padding 区域，蓝色Container 的大小明显超过了 100 ，但是黑色的 H 字母本身并没有超过红色小方块，那蓝色区域的高度是不是 Text 的高度，它的大小又是如何组成的呢？
在这里插入图片描述
事实上，前面的蓝色区域是字体的行高，也就是 line height ，关于这个行高，首先需要解释的就是 TextStyle 中的 height 参数。

默认情况下 height 参数是 null，当我们把它设置为 1 之后，如下图所示，可以看到蓝色区域的高度和红色小方块对齐，变成了 100 的高度，也就是行高变成了 100 ，而 H 字母完整的显示在蓝色区域内。
在这里插入图片描述
那 height 是什么呢？根据文档可知，首先 TextStyle 中的 height 参数值在设置后，其效果值是 fontSize 的倍数：

  • 当 height 为空时，行高默认是使用字体的量度（这个量度后面会有解释）；
  • 当 height 不是空时，行高为 height * fontSize 的大小；

如下图所示，蓝色区域和红色区域的对比就是 height 为 null 和 1 的对比高度。

在这里插入图片描述

另外上图的 BaseLine 也解释了：为什么 fontSize 为 100 的 H 字母，不是充满高度为 100 的蓝色区域。

根据上图的示意效果，在 height 为 1 的红色区域内，H 字母也应该是显示在基线之上，而基线的底部区域是为了如 g 和 j 等字母预留，所以如下图所示，在 Text 内加入 g 字母并打开 Flutter 调试的文本基线显示，由 Flutter 渲染的绿色基线也可以看到符合我们预期的效果。

忘记截图由 g 的了，脑补吧。

在这里插入图片描述
接着如下代码所示，当我们把 height 设置为 2 ，并且把上层的高度为 200 的 Container 添加一个紫色背景，结果如下图所示，可以看到蓝色块刚好充满紫色方块，因为 fontSize 为 100 的文本在 x2 之后恰好高度就是 200。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Container(
        color: Colors.lime,
        alignment: Alignment.center,
        child: Container(
          alignment: Alignment.center,
          child: Container(
            height: 200,
            color: Colors.purple,
            alignment: Alignment.center,
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(
                  color: Colors.blue,
                  child: new Text(
                    "Hg",
                    style: TextStyle(
                      fontSize: 100,
                      height: 2,
                    ),
                  ),

                ),
                Container(
                  height: 100,
                  width: 100,
                  color: Colors.red,
                )
              ],
            ),
          )

        ),
      ),
    );
  }

在这里插入图片描述

不过这里的 Hg 是往下偏移的，为什么这样偏移在后面会介绍，还会有新的对比。

最后如下图所示，是官方提供的在不同 TextStyle 的 height 参数下， Text 所占高度的对比情况。

在这里插入图片描述
二、STRUTSTYLE

那再回顾下前面所说的默认字体的量度，这个默认字体的量度又是如何组成的呢？这就不得不说到 StrutStyle 。

如下代码所示，在之前的代码中添加 StrutStyle ：

  • 设置了 forceStrutHeight 为 true ，这是因为只有 forceStrutHeight 才能强制重置 Text 的 height 属性；
  • 设置了StrutStyle 的 height 设置为 1 ，这样 TextStyle 中的 height 等于 2 就没有了效果。
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Container(
        color: Colors.lime,
        alignment: Alignment.center,
        child: Container(
          alignment: Alignment.center,
          child: Container(
            height: 200,
            color: Colors.purple,
            alignment: Alignment.center,
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(
                  color: Colors.blue,
                  child: new Text(
                    "Hg",
                    style: TextStyle(
                      fontSize: 100,
                      height: 2,
                    ),
                    strutStyle: StrutStyle(
                      forceStrutHeight: true,
                      fontSize: 100,
                      height: 1
                    ),

                  ),

                ),
                Container(
                  height: 100,
                  width: 100,
                  color: Colors.red,
                )
              ],
            ),
          )

        ),
      ),
    );
  }

效果如下图所示，虽然 TextStyle 的 height 是 2 ,但是显示出现是以 StrutStyle 中 height 为 1 的效果为准。

在这里插入图片描述
然后查看文档对于 StrutStyle 中 height 的描述，可以看到：height 的效果依然是 fontSize 的倍数，但是不同的是这里的对 fontSize 进行了补充说明 ： ascent + descent = fontSize，其中：

  • ascent 代表的是基线上方部分；
  • descent 代表的是基线的半部分
  • 其组合效果如下图所示：

在这里插入图片描述

Flutter 中 ascent 和 descent 是不能用代码单独设置。

除此之外，StrutStyle 的 fontSize 和 TextStyle 的 fontSize 作用并不一样：当我们把 StrutStyle 的 fontSize 设置为 50 ，而 TextStyle 的 fontSize 依然是 100 时，如下图所示，可以看到黑色的字体大小没有发生变化，而蓝色部分的大小变为了 50 的大小。

在这里插入图片描述
有人就要说那 StrutStyle 这样的 fontSize 有什么用？

这时候，如果在上面条件不变的情况下，把 Text 中的文本变成 "Hg\nHg" 这样的两行文本，可以看到换行后的文本重叠在了一起，所以 StrutStyle的 fontSize 也是会影响行高。

在这里插入图片描述
另外，在 StrutStyle 中还有另外一个参数也会影响行高，那就是 leading 。

如下图所示，加上了 leading 后才是 Flutter 中对字体行高完全的控制组合，leading 默认为 null ，同时它的效果也是 fontSize 的倍数，并且分布是上下均分。

在这里插入图片描述
所以如下代码所示，当 StrutStyle 的 fontSize 为 100 ，height 为 1，leading 为 1 时，可以看到 leading 的大小让蓝色区域变为了 200，从而 和紫色区域高度又重叠了，不同的对比之前的 Hg 在这次充满显示是居中。


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Container(
        color: Colors.lime,
        alignment: Alignment.center,
        child: Container(
          alignment: Alignment.center,
          child: Container(
            height: 200,
            color: Colors.purple,
            alignment: Alignment.center,
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(
                  color: Colors.blue,
                  child: new Text(
                    "Hg",
                    style: TextStyle(
                      fontSize: 100,
                      height: 2,
                    ),
                    strutStyle: StrutStyle(
                      forceStrutHeight: true,
                      fontSize: 100,
                      height: 1,
                      leading: 1
                    ),

                  ),

                ),
                Container(
                  height: 100,
                  width: 100,
                  color: Colors.red,
                )
              ],
            ),
          )

        ),
      ),
    );
  }

因为 leading 是上下均分的，而 height 是根据 ascent 和 descent 的部分放大，明显 ascent 比 ascent 大得多，所以前面的 TextStyle 的 height 为 2 时，充满后整体往下偏移。

在这里插入图片描述
三、BACKGROUNDCOLOR

那么到这里应该对于 Flutter 中关于文本大小、度量和行高等有了基本的认知，接着再介绍一个属性：TextStyle 的 backgroundColor 。

介绍这个属性是为了和前面的内容产生一个对比，并且解除一些误解。

如下代码所示，可以看到 StrutStyle 的 fontSize 为 100 ，height 为 1，按照前面的介绍，蓝色的区域大小应该是和红色小方块一样大。

然后我们设置了 TextStyle 的 backgroundColor 为具有透明度的绿色，结果如下图所示，可以看到 backgroundColor 的区域超过了 StrutStyle，显示为默认情况下字体的度量。


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Container(
        color: Colors.lime,
        alignment: Alignment.center,
        child: Container(
          alignment: Alignment.center,
          child: Container(
            height: 200,
            color: Colors.purple,
            alignment: Alignment.center,
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(
                  color: Colors.blue,
                  child: new Text(
                    "Hg",
                    style: TextStyle(
                      fontSize: 100,
                      backgroundColor: Colors.green.withAlpha(180)
                    ),
                    strutStyle: StrutStyle(
                      forceStrutHeight: true,
                      fontSize: 100,
                      height: 1,
                    ),

                  ),

                ),
                Container(
                  height: 100,
                  width: 100,
                  color: Colors.red,
                )
              ],
            ),
          )

        ),
      ),
    );
  }

在这里插入图片描述
这是不是很有意思，事实上也可以反应出，字体的度量其实一直都是默认的 ascent + descent = fontSize，我们可以改变 TextStyle 的 height 或者 StrutStyle 来改变行高效果，但是本质上的 fontSize 其实并没有变。

如果把输入内容换成 "H\ng" ，如下图所示可以看到更有意思的效果。

在这里插入图片描述
四、TEXTBASELINE

最后再介绍一个属性 ：TextStyle 的 TextBaseline,因为这个属性一直让人产生“误解”。

关于 TextBaseline 有两个属性，分别是 alphabetic 和 ideographic ，为了更方便解释他们的效果，如下代码所示，我们通过 CustomPaint 把不同的基线位置绘制出来。


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Container(
        color: Colors.lime,
        alignment: Alignment.center,
        child: Container(
          alignment: Alignment.center,
          child: Container(
            height: 200,
            width: 400,
            color: Colors.purple,
            child: CustomPaint(
              painter: Text2Painter(),
            ),
          )

        ),
      ),
    );
  }
  
class Text2Painter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var baseLine = TextBaseline.alphabetic;
    //var baseLine = TextBaseline.ideographic;

    final textStyle =
        TextStyle(color: Colors.white, fontSize: 100, textBaseline: baseLine);
    final textSpan = TextSpan(
      text: 'My文字',
      style: textStyle,
    );
    final textPainter = TextPainter(
      text: textSpan,
      textDirection: TextDirection.ltr,
    );
    textPainter.layout(
      minWidth: 0,
      maxWidth: size.width,
    );

    final left = 0.0;
    final top = 0.0;
    final right = textPainter.width;
    final bottom = textPainter.height;
    final rect = Rect.fromLTRB(left, top, right, bottom);
    final paint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1;
    canvas.drawRect(rect, paint);

    // draw the baseline
    final distanceToBaseline =
        textPainter.computeDistanceToActualBaseline(baseLine);

    canvas.drawLine(
      Offset(0, distanceToBaseline),
      Offset(textPainter.width, distanceToBaseline),
      paint..color = Colors.blue..strokeWidth = 5,
    );

    // draw the text
    final offset = Offset(0, 0);
    textPainter.paint(canvas, offset);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

如下图所示，蓝色的线就是 baseLine，从效果可以直观看到不同 baseLine 下对齐的位置应该在哪里。

在这里插入图片描述
但是事实上 baseLine 的作用并不会直接影响 TextStyle 中文本的对齐方式，Flutter 中默认显示的文本只会通过 TextBaseline.alphabetic 对齐的，如下图所示官方人员也对这个问题有过描述 #47512。

在这里插入图片描述

这也是为什么要用 CustomPaint 展示的原因，因为用默认 Text 展示不出来。

举个典型的例子，如下代码所示，虽然在 Row 和 Text 上都是用了 ideographic ，但是其实并没有达到我们想要的效果。

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Container(
        color: Colors.lime,
        alignment: Alignment.center,
        child: Container(
            alignment: Alignment.center,
            child: Row(
                crossAxisAlignment: CrossAxisAlignment.baseline,
                textBaseline: TextBaseline.ideographic,
                mainAxisSize: MainAxisSize.max,
                children: [
                  Text(
                    '我是中文',
                    style: TextStyle(
                      fontSize: 55,
                      textBaseline: TextBaseline.ideographic,
                    ),
                  ),
                  Spacer(),
                  Text('123y56',
                      style: TextStyle(
                        fontSize: 55,
                        textBaseline: TextBaseline.ideographic,
                      )),
                ])),
      ),
    );
  }

关键就算 Row 设置了 center ，这段文本看起来还是不是特别“对齐”。

在这里插入图片描述
自从，关于 Flutter 中的字体相关的“冷”知识介绍完了，不知道你“无用”的知识有没有增多呢？

{丸の子}
关注
专栏目录
Flutter开发 - 字体的显示不随系统字体的大小而改变
CodingFire的博客
11-20 2254
今天偶然发现在iOS设备上，当设置了紫铜的字体大小很大后，在app中字体变化很大，会导致flutter中文字的换行。虽然算不上bug，但是对app美观性是一种影响。为了不让app字体根据系统字体大小而变化，特地找了下处理的方法： 1.对单个Text设置不跟随系统文字 Text( //倍数可以自己设置，1就是不变 textScaleFactor: 1.0, 'xxxxxxxx', style: TextStyle(fontSize: 14, color: Color(0
【Flutter】Flutter 中的字体管理 如何自定义字体 如何使用字体
最新发布
Code Metaverse
10-29 742
很高兴和大家一起探讨 Flutter 项目中的资源管理，特别是字体管理这一块。字体可能看似微不足道，但在实际的应用开发中，它却能极大地影响用户体验。
Flutter TextField 垂直居中
萌萌新的小菜鸟
02-25 3119
Flutter现学现用, 碰到一个问题: TextField 内容不垂直居中. 度娘搜了半天没找到解决办法, 只能用G哥搜了… 使用textAlign,textAlignVertical分别设置水平居中,垂直居中. 但是, 如果有prefixIcon, 则会导致垂直居中无效, 需要添加isCollapsed: true. 参考: https://stackoverflow.com/questions/50591698/vertically-center-text-in-text-field-in-flut
Flutter TextField设置高度之后文字无法垂直居中
m0_68349563的博客
03-07 1934
解决TextField设置高度之后文字不垂直居中的问题
flutter13 - 文本及样式组件
lianghao的博客
03-18 391
Text文本组件 Key key, this.style, //样式 this.strutStyle, this.textAlign,//对齐方式 this.textDirection,//文字方向 this.locale, this.softWrap, this.overflow,//溢出显示 this.textScaleFactor,//字体大小的缩放因子 this.maxLines,//最大...
flutter 中文字间距的实现
weixin_42180036的博客
04-12 3286
在flutter没有直接设置text 文字间距的方法，可以通过text的StrutStyle属性的leading，加上Transform 偏移来实现。 1.设置StrutStyle的leading final double leading = 0.9; strutStyle:StrutStyle(forceStrutHeight: true, height: 1, leading: leading), 2.利用Transform做计算反方向位置偏移 child: Transform.transl
深入理解Flutter中的动画和过渡效果
# 引言：动画和过渡效果在Flutter开发中的重要性和应用场景 在移动应用开发中，动画和过渡效果是提高用户体验...## Flutter中的动画基础知识 在Flutter开发中，动画是非常重要的一个部分，它可以增加应用的交互性、视
flutter web登录和注册页
04-12
在Flutter Web开发中，构建登录和注册页面是任何应用程序的基础组成部分。Flutter是一个强大的跨平台...通过实践这个项目，开发者能够深入理解Flutter Web开发的基本流程和技巧，为进一步的Web应用开发打下坚实基础。
Flutter官方文档详细翻译
01-08
本文档翻译项目旨在为开发者提供全面、详尽的Flutter中文指南，帮助他们快速上手并深入理解Flutter的核心概念和技术。 1. **环境配置**：在Windows上搭建Flutter开发环境是开发的第一步。你需要安装Git、Java SDK、...
Flutter完整开发实战详解 PDF
09-29
2. 讨论了Flutter中的主题系统，如何自定义主题颜色、字体等，以及全局应用主题的方法。 3. 介绍了实现多语言支持的步骤，包括资源文件的组织和本地化策略。 五、深入探索 1. 对Flutter的源码进行了深入研究，帮助...
Flutter 小技巧之玩转字体渲染和问题修复
恋猫de小郭的博客
06-13 1655
这次的 Flutter 小技巧是字体渲染，虽然是小技巧但是内容略长，可能大家在日常开发中不会特别关心字体相关的部分，而这将是一篇你平时可能用不到 ，但是遇到问题就会翻出来的文章。首先，问一个我经常问的面试题：Flutter 在 Android 和 iOS 上使用了哪些字体？如果你恰好看过 的源码和解释，你可以会有初步结论：但是，如果你再进一步去了解就会发现，在加上中文显示之后，结论应该是：那这时候你可能会问：.SF 没有中文，那可以使用 显示英文吗？ 答案是可以的，但是字形和字重会有微妙区别， 例如下图
Android绘制文本基本概念 top, bottom, ascent, descent, baseline
cuiweicai的博客
01-19 965
Android绘制文本基本概念 top, bottom, ascent, descent, baseline baseLine：一行文字的底线。 Ascent： 字符顶部到baseLine的距离。 Descent： 字符底部到baseLine的距离。 Leading： 字符行间距。 基线（baeseline），坡顶（ascenter）,坡底（descenter）上坡度（ascent），下坡度（descent）行间距（leading）：坡底到下一行坡顶的距离字体的高度＝上坡度＋下坡度＋行间距ascent是
Flutter系列之设置Text文本的行高和间距
热门推荐
shving的专栏
03-06 2万+
设置文本的行高和间距是很常见的操作，flutter中Text组件是通过设置TextStyle中的height来设置行高和间距的，让我们来看一下效果： class TextHeightTest extends StatefulWidget { @override _TextHeightTestState createState() => _TextHeightTestState(); } class _TextHeightTestState extends State<TextHei
flutter text 左对齐,如何在Flutter中将文本垂直和水平居中？
weixin_39628594的博客
12-22 1671
I'd like to know how to center the contents a Text widget vertically and horizontally in Flutter.I only know how to center the widget itself using Center(child: Text("test")) but not the content itsel...
带你深入理解 Flutter 中的字体“冷”知识
恋猫de小郭的博客
05-29 1435
本篇将带你深入理解 Flutter 开发过程中关于字体和文本渲染的“冷”知识，帮助你理解和增加关于 Flutter 中字体绘制的“无用”知识点。 毕竟此类相关的内容太少了 首先从一个简单的文本显示开始，如下代码所示，运行后可以看到界面内出现了一个 H 字母，它的 fontSize 是 100，Text 被放在一个高度为 200 的 Container 中，然后如果这时候有人问你：Text 显示 H 字母需要占据多大的高度，你知道吗？ @override Widget build(BuildCo
Flutter入门进阶之旅（三）Text Widgets
谢栋的专栏
11-19 2178
Text Widgets是Flutter中一个十分常用的一个Widget，类似于Android平台下的TextView，几乎在每个App的UI中都会或多或少的出现它的身影，让我们去一睹Text的风采吧！ 简单Text使用 import 'package:flutter/material.dart'; void main() { runApp(new MaterialApp(home: n...
Flutter完整开发实战详解(十七、 实用技巧与填坑二)，移动端页面开发流程
m0_66685194的博客
03-01 541
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QhZqJ68V-1646114802066)(https://user-gold-cdn.xitu.io/2019/11/18/16e7da8ac3f9ea8b?imageView2/0/w/1280/h/960/ignore-error/1)] 如上图所示，因为当 TextField 的 controller 不为空时，update 时是不会执行 value 的拷贝，所以为了避免这类问题，如下图所示， 需要先在全局构建 Tex
Flutter 上字体的另类玩法：FontFeature
恋猫de小郭的博客
03-24 8928
在以前的 《Flutter 上默认的文本和字体知识点》 和 《带你深入理解 Flutter 中的字体“冷”知识》 中，已经介绍了很多 Flutter 上关于字体有趣的知识点，而本篇讲继续介绍 Flutter 上关于 Text 的一个属性：FontFeature ， 事实上相较于 Flutter ，本篇内容可能和前端或者设计关系更密切。 相信本篇绝对是你能看到关于 Flutter FontFeature 相关的少数资料之一。 什么是 FontFeature？ 简单来说就是影响字体形状的一个属性 ，在
【Flutter -- 进阶】使用字体
Kevin Learn Android
07-24 1516
有时候要在 Flutter 应用程序中使用不同的字体，就好像会使用 UI 创建的自定义字体，或者可能会使用 Google Flonts 中的字体。
Flutter美食应用开发源码深度解析
资源摘要信息: "基于Flutter开发的美食app源码.zip" 知识点： 1. Flutter框架简介：Flutter是谷歌开发的一个开源UI软件开发工具包，用于创建跨平台的...掌握这些知识点对于深入理解和应用Flutter开发有着重要的意义。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值