【每日学点鸿蒙知识】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()
}
相关推荐
用户61595868000227 小时前
从 0 写一个迷你 wujie:用原生 Web API 实现微前端
前端
妙码生花7 小时前
从 PHP 到 AI + Golang,程序员自救转型手记(五十七):AI时代对组件封装的新理解、agInput 统一入口,动态表单预备
前端·后端·go
fairyly7 小时前
接手新项目不用硬啃源码,我的 TRAE Work 快速上手实战工作流
前端·ai编程·trae
搬砖记录员7 小时前
用 PyAutoGUI 手搓录屏"老板键":从原理到四套可跑源码,附工程化落地思考
前端
windliang7 小时前
Claude Code 源码分析(七):Skill 如何进入 Agent
前端·人工智能·面试
栀鸢ouo7 小时前
《Vue 3 实现多主题切换和自定义主题》
前端
缓冲中请稍后7 小时前
React Router 完全指南:从 HashRouter 到 BrowserRouter
前端·面试
妙码生花7 小时前
从 PHP 到 AI + Golang,程序员自救转型手记(五十六):附件管理、增加根据文件后缀生成 SVG 文件图标的接口
前端·后端·go
栀鸢ouo7 小时前
useTableHeight:一个优雅的 Vue 3 表格自适应高度解决方案
前端
橘子星7 小时前
一篇文章搞懂 useRef:聚焦 DOM、模拟 forceRender、管理 Worker 都靠它
前端·javascript