【每日学点鸿蒙知识】placement设置top、组件携带自定义参数、主动隐藏输入框、Web设置字体、对话框设置全屏宽

1、popup组件placement设置top没有生效?

可以用offset属性将popup往下边偏移一下 来规避

2、组件携带自定义参数的接口是哪个?

参考链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-custom-property-V5#customproperty

customProperty

复制代码
customProperty(name: string, value: Optional<Object>)

设置组件的自定义属性。自定义组件不支持设置自定义属性。
卡片能力: 从API version 12开始,该接口支持在ArkTS卡片中使用。

3、HarmonyOS 如何主动隐藏输入弹框?

可以给外层容器添加个点击事件,在点击事件中调用controller.stopEditing()方法移除输入框焦点即可隐藏键盘

复制代码
@Entry
@Component
struct TextInputExample {
  controller: TextInputController = new TextInputController();

  build() {
    Column() {
      TextInput({ controller: this.controller }) }
    .width('100%') .height('100%')
    .onClick(()=>{ this.controller.stopEditing();
    })
  }
}
4、HarmonyOS webview字体大小设置?

使用defaultFontSize设置网页的默认字体大小,参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#ZH-CN_TOPIC_0000001930757269__defaultfontsize9

5、HarmonyOS promptAction.openCustomDialog 弹窗如何宽度设置全屏宽?

目前promptAction.openCustomDialog 设置width('100%'), 系统会默认所在窗口宽度 - 左右 16vp

width参考链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-promptaction-V5#ZH-CN_TOPIC_0000001884757698__customdialogoptions11<br>

demo:

复制代码
import promptAction from '@ohos.promptAction';
import display from '@ohos.display'

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Button('点我').onClick(() => {
      DialogUtils.show(this)
    })
  }
}

@Component
export struct TestComponent {
  build() {
    Row() {
      Text('弹窗内组件1弹窗内组件2弹窗内组件3弹窗内组件4弹窗内组件5弹窗内组件')
        .height(200)
        .textAlign(TextAlign.Center)
    }
  }
}

export class DialogUtils {
  public static createOption(builder: CustomBuilder) {
    const option: promptAction.CustomDialogOptions = {
      builder: builder,
      isModal: true,
      alignment: DialogAlignment.Bottom,
      cornerRadius: 0,
      backgroundColor: Color.Red,
      width: "110%",
      autoCancel: false,
    }
    return option
  }

  public static show(context: Object,) {
    promptAction.openCustomDialog(DialogUtils.createOption(buildComp.bind(context)))
  }
}

@Builder
function buildComp() {
  TestComponent()
}
相关推荐
弓.长.1 分钟前
ReactNative for OpenHarmony项目鸿蒙化三方库:react-native-video — 视频播放组件
react native·音视频·harmonyos
FlyWIHTSKY3 分钟前
Vue 3 单文件组件加载顺序详解
前端·javascript·vue.js
霪霖笙箫9 分钟前
真授之以渔:我是怎么从"想给文章配几张图",一步步做出一个可发布 skill 的
前端·人工智能·开源
yzin12 分钟前
【源码】【react】useCallback、useMemo、memo 原理
前端·react.js
CHU72903512 分钟前
扭蛋机盲盒小程序前端功能设计及核心玩法介绍
前端·小程序
毛骗导演15 分钟前
OpenClaw Gateway RPC 运行时:一个 WebSocket 协议引擎的深度解剖
前端·架构
码路飞16 分钟前
不会 Rust 也能玩 WebAssembly:3 个 npm install 就能用的 WASM 神器
前端·javascript·webassembly
sudo_jin18 分钟前
从“输入网址”到“帧级控制”:我对事件循环与主线程管理的终极认知
前端·javascript
flyfox18 分钟前
Kiro AI IDE 深度使用指南:从入门到高效开发
前端·人工智能·ai编程
lovingsoft19 分钟前
Cursor Skills 实战教程:解锁AI编码效率,附多场景案例
前端·人工智能