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

2025-03-15
北京
本文字数：1582 字
阅读完需：约 5 分钟

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@Componentstruct 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%')  }}

复制代码

效果图：

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

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__swipeaction93：需要自定义样式来实现

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

5、HarmonyOS 使用 @Entry 修饰的组件不走 onPageShow 方法？

Tabs 内嵌使用 @Entry 修饰的组件不走 onPageShow 方法。

tabs 里使用的是组件，就算你添加了 @Entry，还是按照组件去识别了，所以不走 onPageShow，尝试使用 aboutToAppear

</br>

![[Config/Templates/公众号介绍|公众号介绍]]

![[公众号卡片]]![[公众号欢迎词]]

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/805a6843d025a43417585cf86】。文章转载请联系作者。

轻口味

关注

🏆2021年InfoQ写作平台-签约作者 🏆 2017-10-17 加入

Android、音视频、AI相关领域从业者。欢迎加我微信wodekouwei拉您进InfoQ音视频沟通群邮箱：qingkouwei@gmail.com

发布

暂无评论

创作场景