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

变态需求

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

实现

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

实现源码

Dart 复制代码
     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),
                      ),
                    ],
                  ),
                ),
              ),
相关推荐
—Qeyser5 小时前
Flutter网络请求Dio封装实战
网络·flutter·php·xcode·android-studio
消失的旧时光-19437 小时前
Flutter 响应式 + Clean Architecture / MVU 模式 实战指南
android·flutter·架构
你听得到117 小时前
卷不动了?我写了一个 Flutter 全链路监控 SDK,从卡顿、崩溃到性能,一次性搞定!
前端·flutter·性能优化
YUFENGSHI.LJ7 小时前
Flutter 高性能 Tab 导航:懒加载与状态保持的最佳实践
开发语言·flutter·1024程序员节
__WanG18 小时前
如何编写标准StatefulWidget页面
前端·flutter
LinXunFeng18 小时前
Flutter 多仓库本地 Monorepo 方案与体验优化
前端·flutter·架构
2501_919749031 天前
flutter鸿蒙:实现类似B站或抖音的弹幕功能
flutter·华为·harmonyos
用户091 天前
Flutter插件与包的本质差异
android·flutter·面试
浅蓝色1 天前
flutter平台判断,这次应该没问题了。支持鸿蒙,插件已发布
flutter·harmonyos
怀君1 天前
Flutter——打印之PdfPreview功能详细教程
flutter