当前位置：首页 > article >正文

【每日学点HarmonyOS Next知识】抽屉效果、树状组件、离屏渲染、上下文获取、Tab声明周期

article 2025/3/16 7:40:22

1、HarmonyOS 如何实现抽屉效果的控件？

使用半模态框实现抽屉效果参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-sheet-transition-V5#%E7%A4%BA%E4%BE%8B

// xxx.ets
@Entry
@Component
struct SheetTransitionExample {
  @State isShow: boolean = false
  @State sheetHeight: number = 300;

  @Builder
  myBuilder() {
    Column() {
      Button("change height")
        .margin(10)
        .fontSize(20)
        .onClick(() => {
          this.sheetHeight = 500;
        })

      Button("Set Illegal height")
        .margin(10)
        .fontSize(20)
        .onClick(() => {
          this.sheetHeight = -1;
        })

      Button("close modal 1")
        .margin(10)
        .fontSize(20)
        .onClick(() => {
          this.isShow = false;
        })
    }
    .width('100%')
    .height('100%')
  }

  build() {
    Column() {
      Button("transition modal 1")
        .onClick(() => {
          this.isShow = true
        })
        .fontSize(20)
        .margin(10)
        .bindSheet($$this.isShow, this.myBuilder(), {
          height: this.sheetHeight,
          backgroundColor: Color.Green,
          onWillAppear: () => {
            console.log("BindSheet onWillAppear.")
          },
          onAppear: () => {
            console.log("BindSheet onAppear.")
          },
          onWillDisappear: () => {
            console.log("BindSheet onWillDisappear.")
          },
          onDisappear: () => {
            console.log("BindSheet onDisappear.")
          }
        })
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
  }
}

效果图：
![[【每日学点HarmonyOS Next知识】25.02.25.gif]]

通过浮层属性和Panel容器组合实现效果参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-panel-V5
Panel，可滑动面板，提供一种轻量的内容展示窗口，方便在不同尺寸中切换。

2、HarmonyOS treeview怎么实现自定义Cell内容？

1、treeview更改Cell的高度、内容文字的颜色、字体、间距、右边箭头按钮的显示隐藏
2、怎么实现右滑Cell出现删除按钮
3、怎么实现Cell选择功能，每项cell开始位置都显示圆形单选框

1：treeview暂不支持自定义节点样式
2：参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-listitem-V5#ZH-CN_TOPIC_0000001930676593__swipeaction9
3：需要自定义样式来实现

3、HarmonyOS CanvasRenderingContext2D的drawImage方法，绘制通过离屏渲染生成ImageBItmap显示不出来？

CanvasRenderingContext2D的drawImage方法，绘制通过离屏渲染生成ImageBItmap显示不出来

通过OffscreenCanvas生成的ImageBitmap对象官方案例推荐使用CanvasRenderingContext2D.transferFromImageBitmap（）显示，使用drawImage无法显示。

4、HarmonyOS entryAbility的onWindowStageCreate中获取的context为空？

getContext(component?: Object):Context 参数为@Component修饰的页面，entryAbility中不支持，在ability内可使用this.context 直接获取，getContext参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-getcontext-V5