HarmonyOS 鸿蒙Next Scroll包裹RichText时，如何禁止RichText独自滑动

发布于 1周前 作者 phonegap100 最后一次编辑是 5天前 来自 鸿蒙OS

Scroll包裹RichText ,RichText会独自滑动，造成滑动冲突。RichText展示一段文字和一个 图片。能不能禁止RichText滑动，直接将内容全部展示出来 注：

 Scroll() {

          Column() {

            Column() {

              Column() {

                RichText(this.expercisesBean != null ? StringUtils.isStrNotBlank(this.expercisesBean.questionName) ? this.expercisesBean.questionName : '' : '')

                  .width(CommonConstants.FULL_PERCENT).height(CommonConstants.FULL_PERCENT)

                  .backgroundColor(Color.Transparent)

              }.width(CommonConstants.FULL_PERCENT).height(80).padding({right:'30vp',left:'30vp'})

              Column() {

                //

                ForEach(this.expercisesBean?.answerOptionBeanList, (item: AnswerOptionBean, index: number) => {

                  Column() {

                    Row() {

                      //

                      Text(item.answerKey).fontColor('#333333').fontSize('14fp')

                      Stack() {

                        Text(item?.answerValue.replace('</?[^>]+>', ''))

                          .fontColor('#333333')

                          .fontSize('14fp')

                          .width(CommonConstants.FULL_PERCENT)

                          .visibility(this.doExpercisesViewModel.getDoExpagesList(item?.answerValue)

                            .length == 0 ? Visibility.Visible : Visibility.None)

                        Image(this.doExpercisesViewModel.getDoExpagesList(item?.answerValue)[0])

                          .visibility(this.doExpercisesViewModel.getDoExpagesList(item?.answerValue)

                            .length == 0 ? Visibility.None : Visibility.Visible)

                          .objectFit(ImageFit.Auto)

                          .size({ width: CommonConstants.FULL_PERCENT })



                      }.layoutWeight(3).margin({ left: '14vp' })

                      Image($r('app.media.icon_check_error'))

                        .size({ width: '32vp', height: '32vp' })

                        .objectFit(ImageFit.Contain)

                    }

                    .alignItems(VerticalAlign.Center)

                    .width(CommonConstants.FULL_PERCENT)

                    .height("56vp")

                    .borderRadius('30vp')

                    .backgroundColor('#F7F7F7')

                    .padding({ left: '20vp', right: '20vp' })

                  }

                  .size({ width: CommonConstants.FULL_PERCENT })

                  .alignItems(HorizontalAlign.Start)

                  .padding({ left: '32vp', right: '32vp' })

                  .margin({ top: '18vp' })

                })

              }.margin({ top: '20vp' })

              // Text(){

              // }.fontColor('#33333').fontSize('18fp').width(CommonConstants.FULL_PERCENT)



            }

            .alignItems(HorizontalAlign.Start)

            .justifyContent(FlexAlign.Start)

            .backgroundColor(Color.White)

            .borderRadius('12vp')

          }.width(CommonConstants.FULL_PERCENT).height("474vp").padding({ top: '14vp', bottom: '26vp' })

        }.size({ width: CommonConstants.FULL_PERCENT })

更多关于HarmonyOS 鸿蒙Next Scroll包裹RichText时，如何禁止RichText独自滑动的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
4 回复

通过设置hitTestBehavior(HitTestMode.None)可禁止RichText响应触摸，实在不滚动。
文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-universal-attributes-hit-test-behavior-V13#hittestbehavior

 
    RichText(...)
              .width(‘100%’)


              .backgroundColor(Color.Transparent)


              .height(80)


              .hitTestBehavior(HitTestMode.None)

更多关于HarmonyOS 鸿蒙Next Scroll包裹RichText时，如何禁止RichText独自滑动的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


.height(80)跟RichText(Full_PERCENT)限制了高度。导致ri展示了高度

感谢回复

在HarmonyOS鸿蒙系统中，当使用Next Scroll组件包裹RichText组件时，若希望禁止RichText独自滑动，可以通过以下方式实现：

  1. 设置RichText为非可滚动：

    • 在RichText的XML布局文件中，确保未设置任何使其可滚动的属性，如scroll_enabled等。RichText默认是不滚动的，只需确保未显式开启滚动功能。

  2. 调整Next Scroll的滚动行为：

    • 确保Next Scroll的滚动方向和内容布局匹配，避免RichText因内容过长而意外获得滚动条。可以通过设置Next Scroll的scroll_direction属性为none（如果适用）来完全禁止其滚动，但这通常不是推荐做法，因为这会禁用整个Next Scroll的滚动功能。
    • 更常见的做法是调整RichText的大小和Next Scroll的布局，使RichText内容无需滚动即可完全显示。

  3. 使用事件拦截：

    • 可以通过自定义组件或事件监听器拦截RichText的触摸事件，防止其触发滚动行为。不过，这种方式相对复杂，且可能影响其他交互体验。

综上所述，最简单且直接的方法是确保RichText默认不滚动，并调整Next Scroll的布局和内容大小，以适应RichText的显示需求。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部