HarmonyOS Next 底部抽屉滑动效果案例_harmonyos 抽屉控件

最新推荐文章于 2025-02-19 13:52:33 发布

weixin_45933550

最新推荐文章于 2025-02-19 13:52:33 发布

阅读量276

点赞数 4

文章标签： harmonyos 华为

本文链接：https://blog.csdn.net/weixin_45933550/article/details/145098355

版权

使用说明

向上滑动底部列表，支持根据滑动距离进行分阶抽屉式段滑动。

实现思路

本例涉及的关键特性和实现方案如下：

使用RelativeContainer和Stack布局，实现可滑动列表在页面在底部，且在列表滑动到页面顶部时，显示页面顶部标题栏。

Stack({ alignContent: Alignment.TopStart }) {
  RelativeContainer() {
    // Image地图
    ImageMapView()
    // 底部可变分阶段滑动列表
    List({ scroller: this.listScroller }) {
    ...
    }
    .alignRules({
      'bottom': { 'anchor': '__container__', 'align': VerticalAlign.Bottom },
      'left': { 'anchor': '__container__', 'align': HorizontalAlign.Start },
      'right': { 'anchor': '__container__', 'align': HorizontalAlign.End },
    })
  }
  StatusHead({
    statusBarHeight: this.statusBarHeight,
    topHeaderHeight: CommonConstants.PAGE_HEADER_HEIGHT,
    isShow: this.isShow
  })
}

通过对List设置onTouch属性，记录手指按下和离开屏幕纵坐标，判断手势是上/下滑。

List({ scroller: this.listScroller }) {
  ListItemGroup({ header: this.itemHead("安全出行季") }){
  ...
  }
}
.onTouch((event) => {
  switch (event.type) {
    // 手指按下触摸屏幕
    case TouchType.Down: {
      this.yStart = event.touches[0].y;  // 手指按压屏幕的纵坐标
      break;
    }
    // 手指在屏幕移动      
    case TouchType.Move: {