【逐日学点HarmonyOS Next知识】像素单位转换、对话框声明问题、列表嵌套、 ...

1、HarmonyOS 像素单位使用哪一个？

UI给的是 750 像素的图，在开发的时间比如一个按钮宽度是 100px /100dp，应该使用 px2vp(100)，还是使用 100/2 = 50 vp ，还是其他的？
vp和px互相转换具体可参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-pixel-units-V5#%E5%83%8F%E7%B4%A0%E5%8D%95%E4%BD%8D%E8%BD%AC%E6%8D%A2
接口描述vp2px(value : number) : number将vp单位的数值转换为以px为单位的数值。

阐明：

默认使用当前UI实例所在屏幕的假造像素比举行转换，UI实例未创建时，使用默认屏幕的假造像素比举行转换。px2vp(value : number) : number将px单位的数值转换为以vp为单位的数值。

阐明：

默认使用当前UI实例所在屏幕的假造像素比举行转换，UI实例未创建时，使用默认屏幕的假造像素比举行转换。fp2px(value : number) : number将fp单位的数值转换为以px为单位的数值。px2fp(value : number) : number将px单位的数值转换为以fp为单位的数值。lpx2px(value : number) : number将lpx单位的数值转换为以px为单位的数值。px2lpx(value : number) : number将px单位的数值转换为以lpx为单位的数值。 2、HarmonyOS 为什么不可以把CustomeDialogController声明在Component之外？

我想要做一个项目通用LoadingDialog，期望在调用的地方非常方便用，例如：globalDialogController.show()
自定义弹窗 CustomDialogController仅在作为@CustomDialog和@Component struct的成员变量，且在@Component struct内部定义时赋值才有用， 可以使用promptAction.openCustomDialog来举行弹窗绘制，不使用CustomDialogController ， 参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-promptaction-V5
3、HarmonyOS List组件不能嵌套Grid组件吗？

List组件内ListItem渲染Grid组件元素无效
实验如下代码：

1. @Entry
2. @Component
3. struct Index6 {
4.   build() {
5.     Row() {
6.       Column() {
7.         List() {
8.           ListItem() {
9.             Text("我是一个ListItem")
10.           }.height(200)
11.           ListItem() {
12.             Grid() {
13.               ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], (item: number) => {
14.                 GridItem() {
15.                   Column() {
16.                     Text(`number:${item}`)
17.                   }
18.                   .backgroundColor(`#87${item}`)
19.                 }
20.               })
21.             }
22.             .rowsTemplate('1fr 1fr 1fr 1fr 1fr')
23.             .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
24.             .rowsGap(30)
25.             .columnsGap(20)
26.             .backgroundColor("#987")
27.           }.height(200)
28.         }
29.       }
30.       .width('100%')
31.     }
32.     .height('100%')
33.   }
34. }

复制代码

4、HarmonyOS 将byte[] 字节省格式的图片数据，展示到Image组件中？

可以通过将buffer转为PixelMap，然后再加载，示例：

1. let imageSource = image.createImageSource(buffer)
2. let options = {alphaType: 0,                    // 透明度
3.   editable: false,                 // 是否可编辑
4.   pixelFormat: 3,                  // 像素格式
5.   scaleMode: 1,                    // 缩略值
6.   size: {height: 100, width: 100}} // 创建图片大小
7. imageSource.createPixelMap(options).then((pixelMap) => {
8.   this.image = pixelMap
9. })

复制代码

5、HarmonyOS @Builder函数接收的状态变量未引起内部ui变革？

ChangePinPage界面唤起了自定义键盘，在自定义键盘的按钮组件中修改了currentKeyboardType键盘类型来切换中英文键盘，但是CustomKeyboard.ets中Text(                                   {                              \{                  {$.currentKeyboardType})的值并未变革。

1. //xxxModel.ets
2. export class Tmp {
3.   inputController: TextInputController;
4.   currentKeyboardType: number;
5.   constructor(inputController: TextInputController, currentKeyboardType: number) {
6.     this.inputController = inputController;
7.     this.currentKeyboardType = currentKeyboardType
8.   }
9. }
10. # ChangePinPage.ets:
11. @Provide currentKeyboardType: number = Const.KEYBOARD_TYPE_NUMBER;
12. ...
13. TextInput()
14. .customKeyboard(KeyBoardWindow(new Tmp(this.oldPinController, this.currentKeyboardType)))
15. # CustomKeyboard.ets:
16. @Builder
17. export function KeyBoardWindow($$: Tmp) {
18.   Column() {
19.     Row() {
20.       Image($r("app.media.ic_keyboard_down"))// 标题行的”收起“图标
21.         .onClick(() => {
22.           $$.inputController.stopEditing()
23.         })
24.       Text(`${$$.currentKeyboardType}`)
25.    }
26. }
27. // xxxChild.ets ...
28. @Consume currentKeyboardType: number;
29. ...
30. this.currentKeyboardType = 2;

复制代码

全局@Builder自定义构建函数，采用引用传递，假如放在Navigation()的menus内，状态变量的改变不会触发@Builder方法内的UI刷新
按引用传递参数时，传递的参数可为状态变量，且状态变量的改变会引起@Builder方法内的UI刷新。参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-builder-V5
相干demo：

1. @Builder function ABuilder($$: { paramA1: string }) {
2. Row() {
3. Text(`UseStateVarByReference: ${$$.paramA1} `)
4. }
5. }
6. @Entry
7. @Component
8. struct Parent {
9. @State label: string = 'Hello';
10. build() {
11. Column() {
12. // 在Parent组件中调用ABuilder的时候，将this.label引用传递给ABuilder
13. ABuilder({ paramA1: this.label })
14. Button('Click me').onClick(() => {
15. // 点击“Click me”后，UI从“Hello”刷新为“ArkUI”
16. this.label = 'ArkUI';
17. })
18. }
19. }
20. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。