从完成[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等手势识别器一起使用

相关推荐
小蜜蜂嗡嗡5 小时前
flutter封装vlcplayer的控制器
前端·javascript·flutter
你听得到1115 小时前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
哲科软件1 天前
跨平台开发的抉择:Flutter vs 原生安卓(Kotlin)的优劣对比与选型建议
android·flutter·kotlin
天涯海风1 天前
Kuikly 与 Flutter 的全面对比分析,结合技术架构、性能、开发体验等核心维度
flutter·kuikly
aiprtem1 天前
基于Flutter的web登录设计
前端·flutter
coder_pig1 天前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
程序员老刘1 天前
Android 16开发者全解读
android·flutter·客户端
Jalor1 天前
Flutter + 鸿蒙 | Flutter 跳转鸿蒙原生界面
flutter·harmonyos
吴Wu涛涛涛涛涛Tao1 天前
一步到位:用 Very Good CLI × Bloc × go_router 打好 Flutter 工程地基
flutter·ios
九丝城主1 天前
2025使用VM虚拟机安装配置Macos苹果系统下Flutter开发环境保姆级教程--中篇
服务器·flutter·macos·vmware