【鸿蒙4.0】harmonyos Day 03

简介: ArkUI组件-Text、ArkUI组件-TextInput:文本输入框简介及用法

一.ArkUI组件-Text

1.Text:文本显示组件

语法:Text(content?:string|Resource)
  • string格式,直接填写文本内容
Text('我是bug天选之子')
  • Resource格式,读取本地资源文件
Text($r('app.string.width_label'))
"app.string.width_label":读取的是resources文件夹下的:
1.zh_CN下面的element下面的string.json文件(中文环境时读取)
2.en_US下面的element下面的string.json文件(英文环境时读取)
3.上面两种文件都没找到就读取base下面的element下面的string.json文件(默认)

1-8-2.png

2.添加文本属性

Text('我是bug天选之子')
.lineHeight(32) // 行高
.fontsize(20) // 字体大小
.fontColor('red') // 字体颜色
.fontWeight(FontWeight.Medium) // 字体粗细

二.ArkUI组件-TextInput:文本输入框

1.声明TextInput组件:

语法:TextTnput({placeholder?:ResourceStr,text?:ResourceStr})
  • placeHolder:占位符,输入框未输入时的提示文本
textInput({placeholder:'请输入账号或者手机号'})
  • text:输入框当前的文本内容
textInput({text:'bug天选之子'})

2.添加属性和事件

TextInput({text:'我是bug天选之子'})
.width(150) // 宽
.height(30) // 高
.backgroundColor("#fff") // 输入框背景颜色
.type(InputType.Password) // 输入框类型(密码)
.onChange(value => {
    // value是用户输入的文本内容
    })

type属性:

Normal:基本输入模式。支持输入数字、字母、下划线、空格、特殊字符。

Password:密码输入模式。支持输入数字、字母、下划线、空格、特殊字符。

Email:邮箱地址输入模式。支持输入数字、字母、下划线,以及@字符。

Number:纯数字输入模式。

PhoneNumber:电话号码输入模式。支持输入数字,以及+、-。

相关文章
|
1天前
|
JavaScript
HarmonyOS NEXT鸿蒙实现自定义组件插槽
在HarmonyOS NEXT中,通过`@BuilderParam`装饰器实现类似Vue-Slot或React-RenderProps的功能,允许将UI结构的函数作为参数传递给组件并在指定位置渲染。具体步骤如下:
16 5
HarmonyOS NEXT鸿蒙实现自定义组件插槽
|
9天前
|
数据采集 人工智能 数据可视化
Harmony os next~鸿蒙系统开发
鸿蒙系统开发简介: 鸿蒙系统(HarmonyOS)是华为自主研发的面向全场景的分布式操作系统。它旨在为不同设备提供统一的操作平台,支持手机、平板、智能穿戴、车机等多种终端。鸿蒙系统具备微内核架构、低时延和高安全性等特性,通过分布式技术实现设备间无缝协同。开发者可以利用其丰富的API和工具链,构建跨平台应用,提升用户体验。
22 0
|
15天前
|
前端开发 JavaScript 开发工具
【04】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-正确安装鸿蒙SDK-结构目录介绍-路由介绍-帧动画(ohos.animator)书写介绍-能够正常使用依赖库等-ArkUI基础组件介绍-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
【04】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-正确安装鸿蒙SDK-结构目录介绍-路由介绍-帧动画(ohos.animator)书写介绍-能够正常使用依赖库等-ArkUI基础组件介绍-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
81 5
【04】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-正确安装鸿蒙SDK-结构目录介绍-路由介绍-帧动画(ohos.animator)书写介绍-能够正常使用依赖库等-ArkUI基础组件介绍-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
|
19天前
|
存储 人工智能 编译器
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
40 10
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
|
19天前
|
JavaScript 编译器 开发工具
【02】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-准备工具安装-编译器DevEco Studio安装-arkts编程语言认识-编译器devco-鸿蒙SDK安装-模拟器环境调试-hyper虚拟化开启-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
【02】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-准备工具安装-编译器DevEco Studio安装-arkts编程语言认识-编译器devco-鸿蒙SDK安装-模拟器环境调试-hyper虚拟化开启-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
51 2
【02】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-准备工具安装-编译器DevEco Studio安装-arkts编程语言认识-编译器devco-鸿蒙SDK安装-模拟器环境调试-hyper虚拟化开启-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
|
22天前
|
安全 前端开发 开发工具
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
60 5
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
|
24天前
|
缓存 Java 测试技术
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
156 3
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
|
Android开发
HarmonyOS(鸿蒙)——长按事件
HarmonyOS(鸿蒙)——长按事件
411 0
HarmonyOS(鸿蒙)——长按事件
|
1天前
鸿蒙开发:wrapBuilder传递参数
本文,主要简单了介绍了一下,非UI使用的情况下,wrapBuilder传递数据问题,除了以上的方式之外,还有其它的方式可以实现,在实际的开发中,还是具体问题具体分析。
74 61
鸿蒙开发:wrapBuilder传递参数
|
1天前
|
开发者 容器
鸿蒙开发:弹性布局Flex
在实际的开发中,需要掌握主轴与交叉轴的关系、换行规则及子元素属性,同时注意性能与兼容性问题,还有一点,Flex组件在渲染时存在二次布局过程,因此在对性能有严格要求的场景下建议使用Column、Row代替。
22 10
鸿蒙开发:弹性布局Flex

热门文章

最新文章

  • 1
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
  • 2
    EMAS 性能分析全面适配HarmonyOS NEXT,开启原生应用性能优化新纪元
  • 3
    鸿蒙开发:了解@Builder装饰器
  • 4
    【04】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-正确安装鸿蒙SDK-结构目录介绍-路由介绍-帧动画(ohos.animator)书写介绍-能够正常使用依赖库等-ArkUI基础组件介绍-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
  • 5
    鸿蒙H5离线包技术分享
  • 6
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
  • 7
    鸿蒙web加载本地网页资源异常
  • 8
    Harmony os next~HarmonyOS Ability与页面跳转开发详解
  • 9
    【02】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-准备工具安装-编译器DevEco Studio安装-arkts编程语言认识-编译器devco-鸿蒙SDK安装-模拟器环境调试-hyper虚拟化开启-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
  • 10
    HarmonyOS使用系统图标