当前位置: 首页 > news >正文

flutter 多文本,其中文本下划线往下移动

变态需求 

flutter中再满足多行文本,文本内有多个样式,并且多个样式可触发事件的情况,将其中的一部分文本的下划线往下移

方式一:

 实现

使用RichText组件,主要是看中里面的WidgetSpan可以穿child为一个widget

实现源码

     Expanded(child: RichText(text: TextSpan(children: [TextSpan(text: MmStrings.confirmService,style:MmTextStyles.textRegular.copyWith(fontSize: 12.sp),recognizer: TapGestureRecognizer()..onTap = () {context.read<MmSignUpBloc>().add(SignAgreePrivacyChangeEvent(!state.isAgreePrivacyPolicy,),);},),WidgetSpan(child: InkWell(onTap: () {MmWebUtils.launchWebUrl("${CommonConfig.instance.apiPreConfig.webUrl}${MmStrings.serviceAgreementUrl}",);},child: Stack(clipBehavior: Clip.none,children: [Text(MmStrings.serviceAgreement,style: MmTextStyles.agreementStyle.copyWith(fontSize: 12.sp,decoration: TextDecoration.none,),),Positioned(left: 0,right: 0,bottom: -2,child: Container(height: 1,color: MmColors.colorAgreement,),)],),),),TextSpan(text: MmStrings.andThe,style:MmTextStyles.textRegular.copyWith(fontSize: 12.sp),),WidgetSpan(child: InkWell(onTap: () {MmWebUtils.launchWebUrl("${CommonConfig.instance.apiPreConfig.webUrl}${MmStrings.privacyPolicyUrl}",);},child: Stack(clipBehavior: Clip.none,children: [Text(MmStrings.privacyPolicy,style: MmTextStyles.agreementStyle.copyWith(fontSize: 12.sp,decoration: TextDecoration.none,),),Positioned(left: 0,right: 0,bottom: -2,child: Container(height: 1,color: MmColors.colorAgreement,),)],),),),TextSpan(text: ".",style:MmTextStyles.textRegular.copyWith(fontSize: 12.sp),),],),),),

上面的方式有缺点和限制:如当一行文字换行就GG

但是

方式二:

新思路 使用shadow(具体实现很简单 设置shadow

extension MmTextStyleExtension on TextStyle {TextStyle toShadowStyle({double offset = -4,double thickness = 3,bool hasUnderline = true,}) {return this.copyWith(shadows: [Shadow(color: this.color ?? Colors.black,offset: Offset(0, offset),),],decoration: hasUnderline ? TextDecoration.underline : TextDecoration.none,decorationThickness: thickness,color: Colors.transparent,);}
}

使用

Text.rich(TextSpan(children: [TextSpan(text: "example example example example example example ",style: MmTextStyles.textSemiBold.toShadowStyle(hasUnderline: false),),TextSpan(text: "underline underline underline underline underline underline underline ",style: MmTextStyles.textSemiBoldUnLiner.toShadowStyle(),),],),),

方式三:

下面的方式过于复杂不建议

Flutter-Engine 的定制实践:Text 绘制流程浅析及自定义underline的间距-CSDN博客

相关文章:

flutter 多文本,其中文本下划线往下移动

变态需求 flutter中再满足多行文本&#xff0c;文本内有多个样式&#xff0c;并且多个样式可触发事件的情况&#xff0c;将其中的一部分文本的下划线往下移 方式一&#xff1a; 实现 使用RichText组件&#xff0c;主要是看中里面的WidgetSpan可以穿child为一个widget 实现源…...

7.OPEN SQL

总学习目录请点击下面连接 SAP ABAP开发从0到入职&#xff0c;冷冬备战-CSDN博客 目录 ​编辑 1.OPEN-SQL 简单回顾 R3体系 OEPN-SQL 2.OPEN-SQL 读取数据 2.1Select 语句 select 1条数据 多条数据与into AS别名 2.2INTO 结构体 内表 例子 2.3FROM 选择动态表…...

Python轻松获取抖音视频播放量

现在在gpt的加持下写一些简单的代码还是很容易的&#xff0c;效率高&#xff0c;但是要有一点基础&#xff0c;不然有时候发现不了问题&#xff0c;这些都需要经验积累和实战&#xff0c;最好能和工作结合起来&#xff0c;不然很快一段时间就忘的干干净净了&#xff0c;下面就是…...

YOLOv8目标检测(三*)_最佳超参数训练

YOLOv8目标检测(一)_检测流程梳理&#xff1a;YOLOv8目标检测(一)_检测流程梳理_yolo检测流程-CSDN博客 YOLOv8目标检测(二)_准备数据集&#xff1a;YOLOv8目标检测(二)_准备数据集_yolov8 数据集准备-CSDN博客 YOLOv8目标检测(三)_训练模型&#xff1a;YOLOv8目标检测(三)_训…...

SpringBoot SPI

参考 https://blog.csdn.net/Peelarmy/article/details/106872570 https://javaguide.cn/java/basis/spi.html#%E4%BD%95%E8%B0%93-spi SPI SPI(service provider interface)是JDK提供的服务发现机制。以JDBC为例&#xff0c;JDK提供JDBC接口&#xff0c;在包java.sql.*。MY…...

uniappp配置导航栏自定义按钮(解决首次加载图标失败问题)

1.引入iconfont的图标&#xff0c;只保留这两个文件 2.App.vue引入到全局中 import "./static/fonts/iconfont.css"3.pages.json中配置text为图标对应的unicode {"path": "pages/invite/invite","style": {"h5": {"…...

【Apache paimon】-- 集成 hive3.1.3 异常

目录 1、场景再现 Step1:在 hive cli beeline 执行创建 hive paimon 表 Step2:使用 insert into 写入数据 Step3:抛出异常 2、原因分析 Step1:在 yarn resource manager 作业界面查询 hive sql mr job 的 yarn log Step2:搜索job 使用的 zstd jar 版本 Step3:定…...

基于docker部署Nacos最新版本-国内稳定镜像

介绍 当前微服务架构常用的配置中心&#xff0c;本文推荐的是阿里云开源的nacos&#xff0c;截止发布本文为止&#xff0c;最新的nacos稳定版本为2.4.3 拉取镜像 //这个是国内目前可以下载的成熟的nacos镜像仓库&#xff0c;默认的docker hub需要不断的翻墙才可以下载 docke…...

云计算中的Hive操作详解

文章目录 云计算中的Hive操作详解一、引言二、Hive的基本操作1、创建表2、导入数据3、数据查询4、分区表操作 三、使用示例1、字符串处理函数2、数据类型转换 四、总结 云计算中的Hive操作详解 一、引言 Hive是云计算中一个非常重要的组件&#xff0c;它是基于Hadoop的一个数…...

UE4_控件蓝图_制作3D生命血条

一&#xff1a;效果图如下&#xff1a; 二、实现步骤&#xff1a; 1、新建敌人 右键蓝图类 选择角色&#xff0c; 重命名为BP_Enemytest。 双击打开&#xff0c;配置敌人网格体 修改位置及朝向 效果如下&#xff1a; 选择合适的动画蓝图类&#xff1a; 人物就有了动作&#x…...

11篇--图像边缘检测

图像梯度 要学习图像边缘检测&#xff0c;要先了解图像梯度的概念&#xff0c;我们正是通过梯度值来区分边缘像素点的 处于边缘附近的像素点与周围像素点的差距很大&#xff08;不然不会有边缘呈现&#xff09;&#xff0c;所以给边缘附近的的梯度之变化很快&#xff0c;通过…...

宝塔SSL证书申请失败,报错:申请SSL证书错误 module ‘OpenSSL.crypto‘ has no attribute ‘sign‘(已解决)

刚安装宝塔申请SSL就报错&#xff1a;申请SSL证书错误 module OpenSSL.crypto has no attribute sign 面板、插件版本&#xff1a;9.2.0 系统版本&#xff1a;Alibaba Cloud Linux 3.2104 LTS 问题&#xff1a;申请SSL证书错误 module OpenSSL.crypto has no attribute sign…...

(已开源) 详解4D Radar数据集K-Radar

本文介绍一个4D Radar公开数据集&#xff1a;KAIST-Radar&#xff08;简称K-Radar&#xff0c;由AVELab提供&#xff09;是一个新型的大规模目标检测数据集和基准测试集&#xff0c;包含35000帧4D雷达张量&#xff08;4DRT&#xff09;数据。本文主要贡献有&#xff1a; 本文提…...

基于RK3588机器人控制器+3D视觉传感器的送餐机器人解决方案

送餐机器人 通过搭载3D视觉传感器信迈机器人控制器&#xff0c;送餐机器人可以在复杂的餐厅环境中灵活避障通行&#xff0c;极大地提升餐品配送效率&#xff0c;改善用户用餐体验&#xff0c;并显著降低店家经营成本。 高峰期送餐难&#xff0c;曾一直是送餐机器人的行业痛点。…...

基于Qwen2-VL模型针对LaTeX OCR任务进行微调训练 - 数据处理

基于Qwen2-VL模型针对LaTeX OCR任务进行微调训练 - 数据处理 flyfish 基于Qwen2-VL模型针对LaTeX_OCR任务进行微调训练_-_LoRA配置如何写 基于Qwen2-VL模型针对LaTeX_OCR任务进行微调训练_-_单图推理 基于Qwen2-VL模型针对LaTeX_OCR任务进行微调训练_-_原模型_单图推理 基于Q…...

Microi吾码|开源低代码.NET、VUE低代码项目,表单引擎介绍

Microi吾码&#xff5c;开源低代码.NET、VUE低代码项目&#xff0c;表单引擎介绍 一、摘要二、Microi吾码介绍2.1 功能介绍2.2 团队介绍2.3 上线项目案例 三、Microi吾码表单引擎是什么&#xff1f;四、Microi吾码表单引擎功能4.1 模块引擎 - 由表单引擎驱动4.2 流程引擎 - 由表…...

[Ubuntu] Linux命令收集

1、移动文件夹内的所有文件和子文件夹&#xff1a; 如果你想移动一个文件夹内的所有内容到另一个目录&#xff0c;但不移动该文件夹本身&#xff0c;你可以使用以下命令&#xff1a; 源&#xff1a;/home/ubuntu/www/demo/web下的所有文件及文件夹&#xff1b; 目标&#xf…...

鸿蒙应用ArkTS开发-利用axios进行网络请求(实现前后端交互)

引言&#xff1a; 我们上一章实现了简单的登录注册页面&#xff0c;今天小编来带着大家实现完整的登录注册功能。 一、后端的搭建 Spring Boot介绍&#xff1a;Spring Boot是一个用于简化Spring应用程序开发的开源框架。它通过自动配置、内置服务器和预设的最佳实践&#xff0…...

【开源】使用环信UIKit for uniapp 做一个IM即时聊天应用

环信单群聊 UIKit 是基于环信即时通讯云 IM SDK 开发的一款即时通讯 UI 组件库&#xff0c;提供各种组件实现会话列表、聊天界面、联系人列表及后续界面等功能&#xff0c;帮助开发者根据实际业务需求快速搭建包含 UI 界面的即时通讯应用。 本文教大家使用环信 uniapp UIKit 快…...

计算机网络知识点全梳理(一.TCP/IP网络模型)

目录 TCP/IP网络模型概述 应用层 什么是应用层 应用层功能 应用层协议 传输层 什么是传输层 传输层功能 传输层协议 网络层 什么是网络层 网络层功能 网络层协议 数据链路层 什么是数据链路层 数据链路层功能 物理层 物理层的概念和功能 写在前面 本系列文…...

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

C++:std::is_convertible

C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

基于数字孪生的水厂可视化平台建设:架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

关于 WASM:1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

短视频矩阵系统文案创作功能开发实践,定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

保姆级教程:在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...