从完成[flutter竖向显示文字]到对实现方式[Rich Text和Text Span]的一些整理

前言

完成的需求是竖向显示文字,而已有的RotatedBox虽然可以让文字内部控件进行指定角度的旋转,但是不能保持文字仍正常显示(它会因为旋转横着),遂尝试Rich Text和Text Span的方式,这两个我曾在android有略微了解,这次趁机整理

实现

竖向显示文字利用 \n,TextSpan显示文字会把其转变为换行符,每个文字跟一个\n

RichText

  • RichText控件使用一个或多个TextSpan对象来创建富文本显示
  • 传统Text控件只能为整个文本字符串设置单一的样式
  • 而RichText则提供了更多的灵活性,可以将不同的样式应用于同一个文本段落中的不同部分

最基本使用来了解大概用法

Dart 复制代码
RichText(
  text: TextSpan(
    text: 'Hello',
    style: DefaultTextStyle.of(context).style,
    children: <TextSpan>[
      TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
      TextSpan(text: ' world!', style: TextStyle(fontStyle: FontStyle.italic)),
    ],
  ),
)

控件的效果将是显示"Hello bold world!"文本,其中"bold"将会加粗显示,而"world!"将会以斜体显示

style属性的作用

  • style属性用于定义文本的样式,包括字体大小、颜色、字重(粗细)、字体样式(正常或斜体)等
  • style: DefaultTextStyle.of(context).style,意味着顶层TextSpan也就是"Hello "这部分文本将使用BuildContext中找到的默认文本样式
  • 如果没有指定样式,TextSpan将使用Flutter主题中定义的默认文本样式

RichText的text属性与TextSpan的text有什么区别

RichText的text属性

  • 一个TextSpan对象,代表RichText控件中要显示的所有文本的根
  • 它可以包含自己的文本内容和样式,并且可以拥有子TextSpan对象
  • 这个属性是必需的,因为它定义了RichText控件将要渲染的内容

TextSpan的text属性:

  • 指定该TextSpan对象要显示的文本内容
  • 每个TextSpan可以包含自己的text属性,并且可以通过children属性包含其他TextSpan对象,从而构建出复杂的文本结构

RichText控件的其他常用属性

  • textAlign:如何对齐文本
  • textDirection:确定文本的阅读方向,从左到右或者从右到左,尚不能满足需求
  • softWrap:是否在溢出容器时换行
  • overflow:当文本溢出容器时,如何处理额外的文本

TextSpan

  • TextSpan可以包含自己的文本和样式,也可以包含其他TextSpan子项
  • TextSpan通常与RichText一起使用,但它本身并不是一个控件,而是一个描述文本段落中一部分文本样式的对象

属性

  • text :可选,可只使用TextSpan来应用样式而不显示文本,例如,作为children属性的容器

  • style :一个TextStyle对象,用于定义文本的样式,包括字体、大小、颜色、字重等

  • children :一个TextSpan列表

  • recognizer :用于添加文本交互,比如链接或按钮功能,通常与TapGestureRecognizer等手势识别器一起使用

相关推荐
孤鸿玉17 小时前
Fluter InteractiveViewer 与ScrollView滑动冲突问题解决
flutter
叽哥1 天前
Flutter Riverpod上手指南
android·flutter·ios
BG2 天前
Flutter 简仿Excel表格组件介绍
flutter
zhangmeng2 天前
FlutterBoost在iOS26真机运行崩溃问题
flutter·app·swift
恋猫de小郭2 天前
对于普通程序员来说 AI 是什么?AI 究竟用的是什么?
前端·flutter·ai编程
卡尔特斯2 天前
Flutter A GlobalKey was used multipletimes inside one widget'schild list.The ...
flutter
w_y_fan2 天前
Flutter 滚动组件总结
前端·flutter
醉过才知酒浓2 天前
Flutter Getx 的页面传参
flutter
火柴就是我3 天前
flutter 之真手势冲突处理
android·flutter
Speed1233 天前
`mockito` 的核心“打桩”规则
flutter·dart