#鸿蒙通关秘籍#如何实现HarmonyOS底部抽屉滑动效果并使界面沉浸式显示？

要实现HarmonyOS底部抽屉滑动效果并使界面沉浸式显示，可以按照以下步骤操作：

1. 布局设置： 使用RelativeContainer和Stack布局，这样可以在页面底部实现可滑动列表，并在列表滑动到页面顶部时显示标题栏。

   Stack({ alignContent: Alignment.TopStart }) {
     RelativeContainer() {
       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
     });
   }
   

2. 滑动手势检测： 在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: {
         let yEnd = event.touches[0].y;
         let height = Math.abs(yEnd - this.yStart);
         let maxHeight = this.windowHeight - this.statusBarHeight;
         if (yEnd < this.yStart) {
           this.isUp = true;
           ...
         } else {
           this.isUp = false;
           ...
         }
       }
     }
   })
   

3. 调整列表高度： 根据手指滑动长度，改变列表高度并在手指松开后设置最终高度。

   this.isScroll = false;
   this.listHeight = temHeight;
   

4. 滑动结束阶段处理： 根据当前列表高度的区间，设置相应的高度以完成分阶段滑动。

   switch (event.type) {
     case TouchType.Up: {
       this.yStart = event.touches[0].y;
       let maxHeight = this.windowHeight - this.statusBarHeight;
       if (this.isUp) {
         if (this.listHeight > CommonConstants.LIST_HEADER_HEIGHT + this.firstListItemHeight &&
             this.listHeight <= CommonConstants.LIST_HEADER_HEIGHT + this.firstListItemHeight + this.bottomAvoidHeight + this.secondListItemHeight) {
           this.listHeight = CommonConstants.LIST_HEADER_HEIGHT + this.firstListItemHeight + this.secondListItemHeight;
           this.isShow = false;
           return;
         }
         if (CommonConstants.LIST_HEADER_HEIGHT + this.firstListItemHeight + this.bottomAvoidHeight + this.secondListItemHeight < this.listHeight &&
             this.listHeight <= maxHeight) {
           this.listHeight = maxHeight;
           this.isScroll = true;
           this.isShow = true;
           return;
         }
         if (this.listHeight >= maxHeight) {
           this.isScroll = true;
           this.isShow = true;
           return;
         }
       } else {
         // 下滑阶段逻辑
         ...
       }
     }
   }