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

前言

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

实现

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

RichText

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/680109.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

红队笔记Day2 -->上线不出网机器

今天就来讲一下在企业攻防中如何上线不出网的机器&#xff01;&#xff01; 1.基本网络拓扑 基本的网络拓扑就是这样 以下是对应得的P信息&#xff0c;其中的52网段充当一个内网的网段&#xff0c;而111充当公网网段 先ping一下&#xff0c;确保外网ping不通内网&#xff0c;内…

文档类图像的智能识别,百度、阿里、华为腾讯开放接口

文档类图像的智能识别是指利用人工智能技术对文档图像进行自动识别和信息提取。在我国&#xff0c;百度、阿里、华为和腾讯等科技巨头都提供了相应的开放接口&#xff0c;方便开发者集成和使用文档类图像识别功能。以下是这些公司提供的相关开放接口&#xff1a; 1. 百…

微信小程序(四十一)wechat-http的使用

注释很详细&#xff0c;直接上代码 上一篇 新增内容&#xff1a; 1.模块下载 2.模块的使用 在终端输入npm install wechat-http 没有安装成功vue的先看之前的一篇 微信小程序&#xff08;二十&#xff09;Vant组件库的配置- 如果按以上的成功配置出现如下报错先输入以下语句 …

leetcode 24

24. 两两链表交换链表中的节点 已经给出了链表节点结构类&#xff1a; public class ListNode {int val;ListNode next;ListNode() {}ListNode(int val) { this.val val; }ListNode(int val, ListNode next) { this.val val; this.next next; }} 简而言之&#xff0c;我们…

DS:单链表实现队列

创作不易&#xff0c;友友们来个三连支持吧&#xff01; 一、队列的概念 队列&#xff1a;是只允许在一端进行插入数据操作&#xff0c;在另一端进行删除数据操作的特殊线性表&#xff0c;队列具有先进先出FIFO(First In First Out)的特点。 入队列&#xff1a;进行插入操作…

leetcode题目记录

文章目录 单调栈[127. 单词接龙](https://leetcode.cn/problems/word-ladder/)[139. 单词拆分](https://leetcode.cn/problems/word-break/)[15. 三数之和](https://leetcode.cn/problems/3sum/)[140. 单词拆分 II](https://leetcode.cn/problems/word-break-ii/)[113. 路径总和…

《数字孪生城市建设指引报告(2023年)》指引智慧城市行动方向

2023年12月27日&#xff0c;中国信息通信研究院&#xff08;简称“中国信通院”&#xff09;产业与规划研究所、中国互联网协会数字孪生技术应用工作委员会和苏州工业园区数字孪生创新坊联合发布《数字孪生城市建设指引报告&#xff08;2023年&#xff09;》。该报告提出了三大…

PostgreSQL的学习心得和知识总结(一百二十八)|构建 PostgreSQL 负载测试器

目录结构 注:提前言明 本文借鉴了以下博主、书籍或网站的内容,其列表如下: 1、参考书籍:《PostgreSQL数据库内核分析》 2、参考书籍:《数据库事务处理的艺术:事务管理与并发控制》 3、PostgreSQL数据库仓库链接,点击前往 4、日本著名PostgreSQL数据库专家 铃木启修 网站…

Linux:docker在线仓库(docker hub 阿里云)基础操作

把镜像放到公网仓库&#xff0c;这样可以方便大家一起使用&#xff0c;当需要时直接在网上拉取镜像&#xff0c;并且你可以随时管理自己的镜像——删除添加或者修改。 1.docker hub仓库 2.阿里云加速 3.阿里云仓库 由于docker hub是国外的网站&#xff0c;国内的对数据的把控…

.NET Core 3 foreach中取索引index

for和foreach 循环是 C# 开发人员工具箱中最有用的构造之一。 在我看来&#xff0c;迭代一个集合比大多数情况下更方便。 它适用于所有集合类型&#xff0c;包括不可索引的集合类型&#xff08;如 &#xff0c;并且不需要通过索引访问当前元素&#xff09;。 但有时&#xf…

Verilog刷题笔记30

题目&#xff1a; You are provided with a BCD one-digit adder named bcd_fadd that adds two BCD digits and carry-in, and produces a sum and carry-out. 解题&#xff1a; module top_module( input [399:0] a, b,input cin,output cout,output [399:0] sum );reg [99…

代码随想录day20--二叉树的应用8

LeetCode669.修剪二叉搜索树 题目描述&#xff1a; 给你二叉搜索树的根节点 root &#xff0c;同时给定最小边界low 和最大边界 high。通过修剪二叉搜索树&#xff0c;使得所有节点的值在[low, high]中。修剪树 不应该 改变保留在树中的元素的相对结构 (即&#xff0c;如果没…

【ES】--Elasticsearch的分词器深度研究

目录 一、问题描述及分析二、analyze分析器原理三、 multi-fields字段支持多场景搜索(如同时简繁体、拼音等)1、ts_match_analyzer配置分词2、ts_match_all_analyzer配置分词3、ts_match_1_analyzer配置分词4、ts_match_2_analyzer配置分词5、ts_match_3_analyzer配置分词6、ts…

ctfshow-文件上传(web151-web161)

目录 web151 web152 web153 web154 web155 web156 web157 web158 web159 web160 web161 web151 提示前台验证不可靠 那限制条件估计就是在前端设置的 上传php小马后 弹出了窗口说不支持的格式 查看源码 这一条很关键 这种不懂直接ai搜 意思就是限制了上传类型 允许…

Ubuntu Desktop - Files Preferences

Ubuntu Desktop - Files Preferences 1. Behavior2. ViewsReferences 1. Behavior Go to file browser’s Menu -> Edit -> Preferences -> Behavior 2. Views Go to file browser’s Menu -> Edit -> Preferences -> Views ​​​ References [1] Yong…

掘根宝典之C++运算符重载

什么是运算符重载 运算符重载是一种形式的C多态。这很容易让大家想到函数多态&#xff0c;让我们使用同名的函数来完成相同的基本操作&#xff0c;即使是用于不同的类型&#xff0c;不懂函数多态的看这里http://t.csdnimg.cn/ipbqR 运算符重载把重载的概念拓展到运算符上&…

EMC学习笔记(二十五)降低EMI的PCB设计指南(五)

线缆和连接器 1 差模和共模噪声2 串扰3 返回路径数量4 外部PCB -IO 布局建议5 防止噪音和静电放电 tips&#xff1a;资料主要来自网络&#xff0c;仅供学习使用。 设计良好的两层板&#xff0c;和大多数四层板&#xff0c;有最小的辐射。系统级的问题是由于将PCB与任何板外支持…

vector容器

1. vector基本概念 1.1 功能&#xff1a; vector数据结构和数组非常相似&#xff0c;也称为单端数组 vector与普通数组区别&#xff1a; 不同之处在于数组是静态空间&#xff0c;而vector可以动态扩展 动态扩展&#xff1a; 并不是在原空间之后续接新空间&#xff0c;而是找更…

视频讲解:优化柱状图

你好&#xff0c;我是郭震 AI数据可视化 第三集&#xff1a;美化柱状图&#xff0c;完整视频如下所示&#xff1a; 美化后效果前后对比&#xff0c;前&#xff1a; 后&#xff1a; 附完整案例源码&#xff1a; util.py文件 import platformdef get_os():os_name platform.syst…

方舟基金:若美机构按最大夏普率配置比特币,则有望将其推升至230-250万美元...

号外&#xff1a;教链内参2.12《方舟基金重磅报告〈大胆想象2024〉全文pdf》 方舟基金&#xff08;Ark Invest&#xff09;的木头姐&#xff08;Cathie Wood&#xff09;是业内的老熟人了。她一向以大胆的预测而著称。比如就在2023年10月份&#xff0c;木头姐在采访中就曾直言&…