鸿蒙ArkTs语言TextInput组件的一些常用属性一、字体的几个重要属性二、布局的几个重要属性布局元素组成对齐方式三、TextInput的几个重要属性一、字体的几个重要属性可以按下面顺序书写字体字体族fontFamily、颜色fontColor、大小字号fontSize、粗细自重fontWeight、行高lineHeight字体颜色要写系统值 .fontColor($r(sys.color.font_primary)) 尽量不要写绝对值 .fontColor(rgba(0, 0, 0, 0.9)) 字体大小要写系统值 .fontSize($r(sys.float.Title_S)) 尽量不要写绝对值 .fontSize(20) 字重写字重名系统值 .fontWeight(FontWeight.Bold) 尽量不要写绝对值 .fontWeight(700)二、布局的几个重要属性可以按下面顺序书写宽度width、高度height、圆角半径borderRadius、背景颜色backgroundColor、透明度opacity、 主轴对齐方式Row和Flex是水平方向、Column是垂直方向justifyContent、交叉轴对齐方式与主轴方向成90度alignItems、 外部退格边距margin、边框边界border、内部退格填充padding、 分配剩余空间权重layoutWeight布局元素组成组件区域蓝色方块组件区域表示组件的大小width、height属性用于设置组件区域的大小。组件内容区黄色方块组件内容区大小为组件区域大小减去组件的border值组件内容区大小会作为组件内容或者子组件进行大小测算时的布局测算限制。组件内容绿色方块组件内容本身占用的大小比如文本内容占用的大小。组件内容和组件内容区不一定匹配比如设置了固定的width和height此时组件内容的大小就是设置的width和height减去padding和border值但文本内容则是通过文本布局引擎测算后得到的大小可能出现文本真实大小小于设置的组件内容区大小也就是文本内容无法占满文本组件提供的内容区大小。当组件内容和组件内容区大小不一致时align属性生效定义组件内容在组件内容区的对齐方式如居中对齐。组件布局边界虚线部分组件通过margin属性设置外边距时组件布局边界就是组件区域加上margin的大小。详细参考https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkts-layout-development-overview.md对齐方式// 水平方向 HorizontalAlign.Start 左边对齐 HorizontalAlign.Center 居中对齐 HorizontalAlign.End 右边对齐 // 竖直方向 VerticalAlign.Top 顶部对齐 VerticalAlign.Center 居中对齐 VerticalAlign.Bottom 底部对齐 // 主轴方向 FlexAlign.Start 主轴向左对齐 FlexAlign.Center FlexAlign.End FlexAlign.SpaceBetween 第一个元素紧贴容器左边缘最后一个元素紧贴容器右边缘。中间的间距相等但首尾没有额外间距。A [空格] B [空格] C FlexAlign.SpaceAround 每个元素的左右两侧都分配相同的空白空间。首尾元素距离容器边缘的距离等于元素之间间距的一半。[空格] A [空格] B [空格] C [空格] FlexAlign.SpaceEvenly 所有空白空间包括容器边缘和元素之间都完全均匀分配。视觉上所有间距看起来都完全一样非常对称。[空格] A [空格] B [空格] C [空格] // 核心区别在于“空白空间”是如何分配的。在 ArkUI 中FlexAlign 用于 Container如 Row、Column、Flex的主轴对齐。HorizontalAlign 通常用于 Text、Image 等组件的内容对齐或者在特定场景下作为交叉轴对齐的辅助。三、TextInput的几个重要属性.enabled(false) // 禁用整体变灰 .focusable(false) // 不聚焦也无法修改内容 .focusOnTouch(false) // 单击、双击不聚焦但长按可以聚焦从而可以修改内容 .defaultFocus(false) // 初始时默认非聚焦状态 .enableKeyboardOnFocus(false) // 聚焦时不拉起软键盘 .onWillChange((change: EditableTextChangeValue) { return false // 不允许修改控件的输入内容但可以复制 }) .onChange((value: string) { this.inputText value // 输入内容时触发 }) .onSubmit((value: string) { // 提交内容时触发 // value 是用户输入的字符串 console.info(提交的内容是: value) // 在这里执行你的业务逻辑比如搜索、保存等 })举例TextInput({ text: this.fixedPath }) .type(InputType.Normal) .fontFamily(HarmonyHeiTi) .fontColor($r(sys.color.font_primary)) .fontSize($r(sys.float.Body_L)) .fontWeight(FontWeight.Normal) .lineHeight(21) .width(604) .height(40) .borderRadius(8) .backgroundColor($r(sys.color.comp_background_tertiary)) .layoutWeight(1) .defaultFocus(false) // 默认失焦 .focusOnTouch(false) // 单击、双击不聚焦 .enableKeyboardOnFocus(false) // 获焦时不拉起软键盘 .onWillChange((change: EditableTextChangeValue) { return false // 不允许更改 })参考文档https://docs.openharmony.cn/pages/v6.1/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-textinput.md#onsubmit