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

【每日学点鸿蒙知识】Shape描述、全局loading组件、checkbox样式、H5监听键盘收起、弹窗不关闭

article 2025/1/3 10:44:24

1、HarmonyOS 有没有xml描述的Shape？

有没有xml描述的Shape？

官方文档有对用的Shape的参考文档，参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-drawing-components-shape-V5
绘制组件的父组件，父组件中会描述所有绘制组件均支持的通用属性。
1、绘制组件使用Shape作为父组件，实现类似SVG的效果。
2、绘制组件单独使用，用于在页面上绘制指定的图形。

如果一定要xml格式的，使用xml生成的方式，生成xml的shape，请参考xml生成的文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/xml-generation-V5

2、HarmonyOS 全局的loading组件？

全局的loading组件、调接口前开启loading，接口结束时、关闭loading

想要loading弹窗代码全局直接可以引用，不用每个页面都写

目前暂不支持声明全局的CustomDialogController,CustomDialogController仅在作为@CustomDialog和@Component struct的成员变量，且在@Component struct内部定义时赋值才有效。

建议使用：promptAction.openCustomDialog，相关文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-promptaction-V5

对话框customDialogId要保持一致，建议使用全局变量，参考demo如下：

//index.ets
import { promptAction } from '@kit.ArkUI'
import { customDialogBuilder } from './components'

AppStorage.setOrCreate('customDialogId', 0);
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @StorageLink('customDialogId') customDialogId: number = 1;
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            promptAction.openCustomDialog({
              builder: customDialogBuilder.bind(this)
            }).then((dialogId: number) => {
              this.customDialogId = dialogId
            })
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

//custom.ets
import promptAction from '@ohos.promptAction'

@Builder
export function customDialogBuilder() {
  Column() {
    Text('Custom dialog Message').fontSize(10)
    Row() {
      Button("确认").onClick(() => {
        promptAction.closeCustomDialog(AppStorage.get<number>('customDialogId'))
      })
      Blank().width(50)
      Button("取消").onClick(() => {
        promptAction.closeCustomDialog(AppStorage.get<number>('customDialogId'))
      })
    }
  }.height(200).padding(5)
}

3、HarmonyOS toogle 和checkbox的样式如何切换为圆方形?

toogle 和checkbox的样式如何切换为圆方形? 现在进去默认都是圆圈怎么切回圆方形?

ToggleType目前只支持三种类型，就是官方文档中的三种类型，如果想要圆方形的话，使用checkbox。toogle参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-components-basic-toggle-V5

其次，checkbox的样式查看底层代码可以知道:CheckBoxShape目前有两种类型，当CheckBoxShape.ROUNDED_SQUARE=1时就是圆方形，checkbox参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-checkbox-V5

4、HarmonyOS h5上可以通过document.addEventListener(“keyboardhide”,function())监听到键盘收起吗？

可以通过监听“resize”实现，请参考如下demo：

//监听窗口
var originHeight = window.innerHeight;
window.addEventListener("resize",function(){
if (window.innerHeight < originHeight) {
// 键盘展开
} else {
// 键盘收起
}
});