写点什么

关于 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: "。"),            ],          ),        ),      ),    ),  );}
复制代码


好的,完整的源代码就在上面,大家可以自己运行,试一下具体的效果,总的来说体验还是蛮不错的,这个组件的应用场景主要就是可以用来显示一段包含不同样式的文本。希望大家通过本文,对他有一个基础的了解。

发布于: 刚刚阅读数: 2
用户头像

坚果

关注

此间若无火炬,我便是唯一的光 2020.10.25 加入

公众号:“大前端之旅”,华为云享专家,InfoQ签约作者,51CTO博客首席体验官,专注于大前端技术的分享,包括Flutter,小程序,安卓,VUE,JavaScript。

评论

发布
暂无评论
关于Flutter中的RichText组件,你了解多少?_5月月更_坚果_InfoQ写作社区