Flutter 文本 Text 参数图文理解

朴灿烈づ我的快乐病毒、 2023-07-13 15:11 11阅读 0赞

### 文章目录 ###

*   *   *  文本
         *   *  style 样式
             *   *  设置文本行间距
             *  textAlign 对齐方式
             *  overflow 效果展示
             *  textScaleFactor 效果展示
             *  textWidthBasis 效果展示
             *  第三方库推荐

### 文本 ###

在`Flutter`中使用`Text`表示文本，可以查看源码中`Text`都有哪些属性：

const Text(
        this.data, {// data 表示要显示的文本，不能为空
        Key key,
        this.style,// 文本样式，如果为空则使用 DefaultTextStyle
        this.strutStyle,// strut 样式
        this.textAlign,// 文本对齐方式
        this.textDirection,// 文本方向，很少使用
        this.locale,// 用于选择区域特定字形的语言环境，很少用到
        this.softWrap,// 某一行文本过长，是否需要换行。默认为true
        this.overflow,// 视觉溢出
        this.textScaleFactor,// 每个逻辑像素的字体像素数
        this.maxLines,// 文本最大行数
        this.semanticsLabel,//图像的语义描述，很少用到
        this.textWidthBasis,//文本的宽度
      })

通过上面的代码注释基本知道`Text`组件相关参数的作用，但是还有一些参数不是很理解，比如

*  style 能设置哪些样式？
 *  textAlign 对齐方式有哪些？
 *  overflow 没有概念，想象不出来效果
 *  textScaleFactor 没有概念，想象不出来效果
 *  textWidthBasis 没有概念，想象不出来效果

所以接下来咱们就深入了解这些属性

#### style 样式 ####

`style`是`TextStyle`的示例，那么查看源码中`TextStyle`都有哪些可以设置的属性：

const TextStyle({
        this.inherit = true,//为false的时候不显示
        this.color,// 文本颜色
        this.backgroundColor,// 背景色
        this.fontSize,// 字体大小
        this.fontWeight,// 字体宽度，Html 中加粗也可用这个字段
        this.fontStyle,// 字体样式，粗体、斜体
        this.letterSpacing,// 字符间距
        this.wordSpacing,// 字间距
        this.textBaseline,// 文本基准线
        this.height,// 文本的行高
        this.locale,
        this.foreground,// 文本前景色
        this.background,// 文本背景色
        this.shadows,// // 文本阴影
        this.fontFeatures,
        this.decoration,// 添加上划线，下划线，删除线
        this.decorationColor, // 上划线，下划线，删除线的颜色
        this.decorationStyle,// 上划线，下划线，删除线的样式：可控制画实线，虚线，两条线，点, 波浪线等
        this.decorationThickness,
        this.debugLabel,
        String fontFamily,// 字体
        List<String> fontFamilyFallback,
        String package,
      })

##### 设置文本行间距 #####

> 使用 style 中的 height 字段即可，height 的值为 fontSize \* height

#### textAlign 对齐方式 ####

*  left：对齐容器左边缘的文本。
 *  right：对齐容器右边缘的文本。
 *  center：将文本对齐容器的中心。
 *  justify：拉伸以结束的文本行以填充容器的宽度
 *  start：对齐容器前缘上的文本。
 *  end：对齐容器后缘上的文本。

效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70]

#### overflow 效果展示 ####

*  clip：剪切溢出的文本填满容器。
 *  fade：将溢出的文本淡化为透明。
 *  ellipsis：使用省略号表示文本已溢出。
 *  visible：呈现容器外溢出的文本。

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 1]

#### textScaleFactor 效果展示 ####

> 每个逻辑像素的字体像素数,默认是1.0

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 2]

#### textWidthBasis 效果展示 ####

*  parent：多行文字将占据父文本给定的全宽，单行文本仅包含文本所需的最小宽度将被使用。常见用例是：段落
 *  longestLine：宽度刚好能容纳最长的一行，一个常见的用例是聊天气泡

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 3]

在`Android`中会出现下图中出现的效果：也就是一行文本中出现不同颜色的文字。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 4]

通过学习`Text`组件，我们发现`style`熟悉设置的是整个文本的样式，上图所示是没有办法实现的。  
这时候就需要用上了`TextSpan`了。

`TextSpan`，它代表文本的一个“片段”，承载`TextSpan`的组件是`Text.rich`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 5]  
例如：  
我们要实现一行文本中出现不同颜色的文字。

伪代码如下：

import 'package:flutter/gestures.dart';
    @override
      Widget build(BuildContext context) {
        print("_MyHomePageState-build");
        final TapGestureRecognizer _tapRecognizer = new TapGestureRecognizer();
        _tapRecognizer.onTap = () {
          Scaffold.of(context).showSnackBar(new SnackBar(
            content: new Text('点击红字!'),
          ));
        };
    
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text.rich(TextSpan(children: [
                  TextSpan(
                    text: "累计确诊城市 ",
                    style: TextStyle(
                      fontSize: 50,
                    ),
                  ),
                  TextSpan(
                      text: "337",
                      style: TextStyle(
                        color: Colors.red,
                        fontSize: 50,
                      ),
                      recognizer: _tapRecognizer),
                ])),
              ],
            ),
          ),
        );
      }

#### 第三方库推荐 ####

有时候接口返回的数据中会带有`Html`标签，我们显示的时候肯定是要解析标签后才显示，如下是搜索接口返回的高亮关键字标签：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 6]  
这时候可以使用，**[显示`Html`][Html]** 这个库解决。

dependencies:
      flutter_html: ^0.11.1

使用的话也是很简单的：详细代码可查看 **[Flutter-WanAndroid][]**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 7]  
完~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70]: /images/20230529/27aeae70690148fa903941dd60014820.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 1]: /images/20230529/06dd2b6a29fd4017b93bc8084264b5d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 2]: /images/20230529/2cae319624dd482e95fcf8b229004eb0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 3]: /images/20230529/a5e3ced030b04c86bda09c669dfb564f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 4]: /images/20230529/8c5e3b1d2b7d4a98a533b581da13f887.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 5]: /images/20230529/69e8f2093253459aa123c96984d980fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 6]: /images/20230529/c88693a7c098415d81ef690994bb4431.png
[Html]: https://pub.flutter-io.cn/packages/flutter_html
[Flutter-WanAndroid]: https://github.com/dongxi346/Flutter-WanAndroid
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 7]: /images/20230529/824891219d2a437187991d9d1452b459.png