关于 Flutter 中的 RichText 组件，你了解多少？

作者：坚果

2022 年 5 月 04 日
本文字数：1372 字
阅读完需：约 5 分钟

大家好，我是坚果

今天给大家带来的是 RichText 组件，他里面有个 text 属性，RichText 显示的文本内容是 TextSpan 类型，他不是一个简单的 string，而是 TextSpan 类型，TextSpan 类型是一个可以无限传递的树形结构，每个节点出了 text 属性，还可以通过 style 属性，设置自定义文字样式。甚至通过 children 属性，传入一个 TextSpan 列表作为子节点，已实现叠加和嵌套文字样式的功能。然后大家有没有疑问，关于红色的这个是如何设置的，这个我可以称呼它为碰撞检测，以便完成 TextSpan 树中某一片段的建设。recognizer: TapGestureRecognizer()这个属性就可以做到，当然，还有一个组件也有类似的功能，是什么呢？GestureDetector，大家可以对他也了解了解。

其实关于 RichText 组件还是有很多属性的，比如 textScaleFactor 是放大系数，textAlign 是文字对其方式，softWrap 是否允许多行显示。

Key? key,    required this.text,    this.textAlign = TextAlign.start,    this.textDirection,    this.softWrap = true,    this.overflow = TextOverflow.clip,    this.textScaleFactor = 1.0,//放大系数    this.maxLines,    this.locale,    this.strutStyle,    this.textWidthBasis = TextWidthBasis.parent,    this.textHeightBehavior,

复制代码

import 'package:flutter/material.dart';import 'package:flutter/gestures.dart';void main() {  runApp(    MaterialApp(      home: Scaffold(        appBar: AppBar(title: const Text("RichText Demo")),        body: RichText(          text: TextSpan(            style: const TextStyle(color: Colors.blue, fontSize: 36),            children: [              const TextSpan(text: "我已阅读"),              TextSpan(                style: const TextStyle(                  color: Colors.red,                  decoration: TextDecoration.underline,                ),                text: "使用条款",                recognizer: TapGestureRecognizer()                  ..onTap = () => print("检测到用户点击使用条款"),              ),              const TextSpan(text: "和"),              TextSpan(                style: const TextStyle(                  color: Colors.red,                  decoration: TextDecoration.underline,                ),                text: "隐私政策",                recognizer: TapGestureRecognizer()                  // ignore: avoid_print                  ..onTap = () => print("检测到用户点击隐私政策"),              ),              const TextSpan(text: "。"),            ],          ),        ),      ),    ),  );}