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

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

news 2025/7/15 9:12:02

变态需求

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博客

查看全文

http://www.lryc.cn/news/505006.html