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