flutter开发实战-RichText富文本居中对齐

flutter开发实战-RichText富文本居中对齐

在开发过程中,经常会使用到RichText,当使用RichText时候,不同文本字体大小默认没有居中对齐。这里记录一下设置过程。

一、使用RichText

我这里使用RichText设置不同字体大小的文本

Container(decoration: BoxDecoration(color: Colors.amber,),alignment: Alignment.center,child: RichText(textAlign: TextAlign.center,text: TextSpan(children: [TextSpan(text: 'Hello\s',style: TextStyle(fontSize: 30,)),TextSpan(text: 'Flutter',style: TextStyle(fontSize: 50),),TextSpan(text: 'let\s go',style: TextStyle(fontSize: 30,)),]),),),

在设置后发现文本没有在竖直方向没有居中对齐。
下面需要使用到WidgetSpan

WidgetSpan是官方提供用于针对图文混排的非常便捷的实现方式。WidgetSpan可以接入任何你需要的Widget。

在WidgetSpan支持在文本中插入指定的Widget,可以提升富文本自定义效果。

Text.rich(TextSpan(children: <InlineSpan>[TextSpan(text: 'Hello World!'),WidgetSpan(child: SizedBox(width: 100,height: 50,child: Card(color: Colors.red,child: Center(child: Text('flutter'))),)),TextSpan(text: '加油!'),],)

二、RichText富文本居中对齐

RichText富文本居中对齐,我们可以将文本进行使用WidgetSpan进行嵌套。

WidgetSpan buildCenteredTextSpan({required String text, required TextStyle style}) {return WidgetSpan(alignment: PlaceholderAlignment.middle,child: Text(text, style: style),);}

调整之后的代码如下

Container(decoration: BoxDecoration(color: Colors.amber,),alignment: Alignment.center,child: RichText(textAlign: TextAlign.center,text: TextSpan(children: [buildCenteredTextSpan(text: 'Hello\s', style: TextStyle(fontSize: 30,)),buildCenteredTextSpan(text: 'Flutter', style: TextStyle(fontSize: 50,)),buildCenteredTextSpan(text: ' let\s go', style: TextStyle(fontSize: 30,)),]),),),

效果图如下
在这里插入图片描述

三、小结

flutter开发实战-RichText富文本居中对齐

学习记录,每天不停进步。

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

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

相关文章

Kimichat使用案例013:用kimichat批量识别出图片版PDF文件中的文字内容

文章目录 一、介绍二、具体操作三、信息识别一、介绍 图片版的PDF文件,怎么才能借助AI工具来提取其中全部的文字内容呢? 第一步:将PDF文件转换成图片格式 具体方法参见文章: Kimichat使用案例011:用kimichat将PDF自动批量分割成多个图片(零代码编程) 第二步:识别图片中…

IEC61850 调试工具 工程师必备

文章目录 IEC61850 调试工具 工程师必备主要功能软件截图 IEC61850 调试工具 工程师必备 下载地址&#xff1a;http://www.redisant.cn/iec61850client IEC 61850 是国际电工委员会&#xff08;IEC&#xff09;制定的一项国际标准&#xff0c;主要用于电力系统自动化领域&…

AI引领项目管理新时代:效率与智能并驾齐驱

在数字化浪潮的推动下&#xff0c;项目管理领域正迎来一场由AI技术引领的革新。从自动化任务执行到智能决策支持&#xff0c;AI技术的应用正让项目管理变得更加高效、精准和智能化。本文将探讨项目管理人员及其实施团队如何运用AI技术&#xff0c;以及这些技术如何助力项目管理…

vue3 前端验证码-删除最后一个,焦点聚焦在前一个值上,并不会删除值

删除最后一个数字&#xff0c;焦点聚焦在前一个值上&#xff0c;并不会删除值 <inputv-for"(box, index) in boxes":key"index"ref"inputRefs":value"box"input"onInputChange(index)"keyup"onKeyDown($event, inde…

2、给出五种并行计算机体系结构的名称,并分别画出其典型结构。

①并行向量处理机&#xff08;PVP&#xff09; ②对称多机系统&#xff08;SMP&#xff09; ③大规模并行处理机&#xff08;MPP&#xff09; ④分布式共享存储器多机系统&#xff08;DSM&#xff09; ⑤工作站机群&#xff08;COW&#xff09;

Cargo 教程

Cargo 教程 1. 引言 Cargo 是 Rust 编程语言的包管理器和构建工具。它为 Rust 项目提供了依赖管理、编译和打包等功能。本教程将详细介绍 Cargo 的基本用法,帮助您快速上手 Rust 项目开发。 2. 安装 Cargo 在开始使用 Cargo 之前,您需要确保已经安装了 Rust 编程语言。Ru…

晶振的匹配电容的计算

晶振 等效电路 C0是晶振的静态电容 L1是晶振的等效电感 C1是晶振的等效电容 R1是晶振的等效串联电阻 芯片内部已有反相器和负载电阻 计算公式 参考1 参考2

Linux知识整理说明

最近学校Linux课程刚刚结课&#xff0c;但还是有其他课程在继续。 所以接下来我会抽时间&#xff0c;根据笔记以及网络资料&#xff0c;整理和Linux相关的知识文档&#xff0c;各位可以后续留意. 完整的章目录我会先发出来&#xff0c;后续补充完整。 所有的内容会在 下周三(6…

文件操作(总)

1.为什么使用文件 a是内存上的一块区域 如果程序退出&#xff0c;则内存回收&#xff0c;数据丢失了&#xff0c;再次运行就看不到上次的数据了 为了持久化保存&#xff0c;我们可以使用文件 2.文件是什么 磁盘上的文件是文件 在程序设计中&#xff0c;文件有两种&#xff…

NLP入门——基于TF-IDF算法的应用

从json格式数据中抽出句子和标签 首先查看json格式的数据文件&#xff1a; :~/nlp/tnews/src$ less train.json可以看到json字符串表示一个对象&#xff0c;我们利用json.loads() 函数会将其转换为一个 Python 字典。docs python json #ext.py #encoding: utf-8import sys f…

String[] 转ArrayList<String>

这种方式会将数组转换为一个固定大小的列表&#xff0c;虽然可以直接转换为ArrayList&#xff0c;但是这个列表是基于原数组的一个视图&#xff0c;对视图的更改会反映到原数组中&#xff0c;反之亦然。如果需要独立于原数组操作&#xff0c;请使用下面的方法。 使用循环添加&…

百度之星2024题目记录

目录 1 介绍2 训练-钻石level3 参考 1 介绍 本博客记录百度之星2024编程比赛相关题目。 2 训练-钻石level 题目1&#xff1a;BD202401补给 解题思路&#xff1a;排序贪心。优惠到最后购买不了任何商品时才使用。 C代码如下&#xff0c; #include<bits/stdc.h> usin…

【并集查找】839. 相似字符串组

本文涉及知识点 并集查找&#xff08;并差集) 图论知识汇总 LeetCode839. 相似字符串组 如果交换字符串 X 中的两个不同位置的字母&#xff0c;使得它和字符串 Y 相等&#xff0c;那么称 X 和 Y 两个字符串相似。如果这两个字符串本身是相等的&#xff0c;那它们也是相似的。…

现在Java行情不好可以转.net吗?

转向.NET开发可能是一个选择&#xff0c;但要注意以下几点。我这里有一套编程入门教程&#xff0c;不仅包含了详细的视频 讲解&#xff0c;项目实战。如果你渴望学习编程&#xff0c;不妨点个关注&#xff0c;给个评论222&#xff0c;私信22&#xff0c;我在后台发给你。 技术转…

「前端+鸿蒙」鸿蒙应用开发-ArkTS-声明式UI组件化

鸿蒙应用开发中&#xff0c;ArkTS 是一个基于 TypeScript 的开发框架&#xff0c;它允许开发者使用声明式 UI 和组件化的方式来构建用户界面。声明式 UI 意味着你通过描述 UI 的状态和状态的变化来更新界面&#xff0c;而不是通过命令式地操作 DOM。组件化则是将 UI 拆分成独立…

闭包、内存泄漏、垃圾回收详解

首先要说清楚这个话题&#xff0c;必须要先清楚什么是垃圾回收&#xff0c;要清楚什么是垃圾回收呢&#xff0c;必须要知道什么是垃圾&#xff0c;所谓的垃圾就是不再需要的内存&#xff0c;需要或者不需要是由人为来决定的 <!DOCTYPE html> <html lang"en"…

STM32的FreeRtos的学习

首先就是去官网下载一个源文件&#xff1a;FreeRtos官网 下载下来的是一个zip文件&#xff0c;解压缩了。 然后再工程文件夹中创建个文件夹&#xff1a; 在这个文件夹中创建3个文件夹&#xff1a; 然后开始把下载下来的文件夹中的文件挑选出来放到我们的工程文件夹中&#xff1…

canal应用

1. canal分享模块链接 分享模块 分享链接Mysql日志-binlog有道云笔记 (youdao.com)canal-deployer实战有道云笔记 (youdao.com)canal-tcp客户端 有道云笔记 (youdao.com)canal-adapter实战有道云笔记 (youdao.com) canal源码下载地址 Gitee 极速下载/canal 2. 客户端测试链接…

Kafka多维度调优

优化金字塔 应用程序层面 框架层面&#xff08;Broker层面&#xff09; JVM层面 操作系统层面 应用程序层面&#xff1a;应当优化业务代码合理使用kafka&#xff0c;合理规划主题&#xff0c;合理规划分区&#xff0c;合理设计数据结构&#xff1b; 框架层面&#xff1a;在不…

SPI转四串口芯片CH9434的设计

一、CH9434的介绍 CH9434 是一款SPI转四串口转接芯片&#xff0c;提供四组全双工的9线异步串口&#xff0c;用于单片机/嵌入式系统扩展异步串口。CH9434包含四个兼容16C550的异步串口&#xff0c;最高支持4Mbps波特率通讯。最多支持25 路GPIO&#xff0c;提供半双工收发自动切换…