HarmonyOS 鸿蒙Next 使用半模态转场,弹出框中列表组件和当前滑动冲突问题解决

发布于 1周前 作者 sinazl 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 使用半模态转场,弹出框中列表组件和当前滑动冲突问题解决 使用半模态转场功能,链接如下:
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-sheet-transition-V5#sheetoptions

在弹出框中使用自己的布局绘制UI,如果里面有列表数据展示,请问如何解决滑动冲突问题,例如:

  1. 全屏模式下,向上滑动到列表顶部后滑动给到半模态转场组件直接下滑收起,当往下滑动列表数据的时候,滑动给到列表下滑分页数据
  2. 半屏模式下,当往上滑动时不优先给到列表滑动,而是给到半模态转场滑动到全屏展示,然后才给到列表滑动数据

类似Android中的BottomSheetDialog功能,


更多关于HarmonyOS 鸿蒙Next 使用半模态转场,弹出框中列表组件和当前滑动冲突问题解决的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

参考如下demo:

@Entry
@Component
struct SheetTransitionExample {

  @State isShow: boolean = false

  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

  @Builder
  myBuilder() {
    Column() {
      List({ space: 20, initialIndex: 0 }) {
        ForEach(this.arr, (item: number) => {
          ListItem() {
            Text('' + item)
              .width('100%').height(100).fontSize(16)
              .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
          }
        }, (item: string) => item)
      }.nestedScroll({
        scrollForward: NestedScrollMode.PARENT_FIRST,
        scrollBackward: NestedScrollMode.SELF_FIRST
      })
    }
  }

  build() {
    Column() {
      Button("transition modal 1")
        .onClick(() => {
          this.isShow = true
        })
        .fontSize(20)
        .margin(10)
        .bindSheet($$.isShow, this.myBuilder(), {
          detents:[SheetSize.MEDIUM, SheetSize.LARGE, 200],
          backgroundColor: Color.Green,
        })
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next 使用半模态转场,弹出框中列表组件和当前滑动冲突问题解决的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next系统中,使用半模态转场时,若遇到弹出框中的列表组件与当前页面的滑动操作产生冲突的问题,可以通过以下方式解决:

  1. 事件拦截与传递:确保弹出框的列表组件正确拦截并处理滑动事件。检查事件是否在组件间正确传递,避免事件冒泡导致冲突。可以通过设置组件的触摸事件监听器,明确处理滑动事件的逻辑。

  2. 焦点管理:优化焦点管理策略,确保在弹出框显示时,列表组件获得焦点,同时当前页面的滑动操作被临时禁用或调整其响应优先级。

  3. 动画与状态同步:检查半模态转场的动画效果是否与组件状态同步。确保动画执行过程中,组件的交互状态(如可滑动性)得到正确管理。

  4. 布局层级与遮挡:调整弹出框与当前页面的布局层级,确保弹出框正确遮挡当前页面的可滑动区域,避免用户误操作。

  5. 自定义转场效果:如果系统提供的半模态转场效果不满足需求,可以考虑自定义转场动画,更精细地控制弹出框与当前页面的交互行为。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部