主要目录配置文件作用
stage
应用入口配置文件:应用配置
页面配置文件:存放创建的页面
资源配置文件:存放项目资源
创建页面配置
英文配置:对英文进行编辑
中文配置:对中文进行编辑
应用配置:HAP包的配置信息
FA
页面配置文件:对页面进行编辑
资源文件:文字和图片及语言的配置
英文配置
中文配置
应用配置
语法基础知识
UI
struct:自定义组件可以基于struct实现,不能有继承关系,对于struct的实例化,可以省略new
装饰器:装饰器给被装饰的对象赋予某一种能力,其不仅可以装饰类或结构体,还可以装饰类的属性
build函数:自定义组件必须定义build函数,并且禁止自定义构造函数
@Component:装饰struct,结构体在装饰后具有基于组件的能力,需要实现build方法来创建UI
@Entry: 装饰struct,组件被装饰后作为页面的入口,页面加载时将被渲染显示
@Preview:装饰struct, 用@Preview装饰的自定义组件可以在DevEco Studio的预览器上进行实时预览,加载页面时,将创建并显示@Preview装饰的自定义组件
Text组件的必选参数content:Text('test')
配置Text组件的字体大小属性:
Text('test')
.fontSize(12)
![](https://i-blog.csdnimg.cn/blog_migrate/81dd12cdcb5461621b9416e645fa61b5.png)
更换应用图标和名字
复制想要图片,粘贴到如下图文件夹中
![](https://i-blog.csdnimg.cn/blog_migrate/aad29c60a0f81200101129573c3bff41.png)
在config.json中打开,更改红框中引号的内容(Ctrl+鼠标左键点击label可跳转3中的三个文件)
![](https://i-blog.csdnimg.cn/blog_migrate/6c10ccd4f9399b9bb13d9f7d23857170.png)
更改这三个文件中的value
![](https://i-blog.csdnimg.cn/blog_migrate/a13faf3a5f810b9ae0b37e0226c06718.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d5abd7b4af67e4d5d948a51708b30218.png)
项目远程模拟方法
登录华为账号并进行实名认证
进入Device Manager
![](https://i-blog.csdnimg.cn/blog_migrate/9500aa1443edb96ec2cc8e1a095a6ae7.png)
进入后随机点一个运行
![](https://i-blog.csdnimg.cn/blog_migrate/1c43dab5b5a7712df8b8dc8865be0620.png)
随后成功运行
![](https://i-blog.csdnimg.cn/blog_migrate/f98b069b84667ec3590fa788882efc20.png)
常用基础组件
Text
文本样式
![](https://i-blog.csdnimg.cn/blog_migrate/2bf80dd8118bfa6091dc29b71d8c27a8.png)
示例:
![](https://i-blog.csdnimg.cn/blog_migrate/8dca970ef6144f0f4a33d8cf21676676.png)
文本对齐方式
Start(默认值):水平对齐首部
Center:水平居中对齐
End:水平对齐尾部
例:Text('HarmonyOS')
.textAlign(TextAlign.Start)
文本超长显示
![](https://i-blog.csdnimg.cn/blog_migrate/eb54a1cc39bf03bff384998768879572.png)
![](https://i-blog.csdnimg.cn/blog_migrate/8a2147f760faf8cf01ca29744b82b281.png)
文本装饰线
None:不使用文本装饰线
Overline:文字上划线修饰
LineThrough:穿过文本的修饰线
Underline:文字下划线修饰
Text('HarmonyOS')
.decoration({ type: TextDecorationType.Underline, color: Color.Black })
Image
本地 Image($r("app.media.icon"))
Contain:保持宽高比进行缩小或者放大,使得图片完全显示在显示边界内
Auto:自适应显示
Cover(默认值):保持宽高比进行缩小或者放大,使得图片两边都大于或等于显示边界
Fill:不保持宽高比进行放大缩小,使得图片充满显示边界
ScaleDown:保持宽高比显示,图片缩小或者保持不变
None:保持原有尺寸显示
.objectFit(ImageFit.Cover)
网络 Image('https://www.example.com/xxx.png')
![](https://i-blog.csdnimg.cn/blog_migrate/d23005d9f43bacffbf92a8856777bd4d.png)
TextInput
输入提示文本
TextInput({ placeholder: '请输入帐号' })
.placeholderColor(0x999999)
.placeholderFont({ size: 20, weight: FontWeight.Medium, family: 'cursive', style: FontStyle.Italic })
输入类型
Normal:基本输入模式。支持输入数字、字母、下划线、空格、特殊字符
Password:密码输入模式
Email:e-mail地址输入模式
Number:纯数字输入模式
TextInput({ placeholder: '请输入密码' })
.type(InputType.Password)
光标位置
![](https://i-blog.csdnimg.cn/blog_migrate/53a6c63eaced8934453d6303a7afa2f9.png)
获取输入文本
![](https://i-blog.csdnimg.cn/blog_migrate/2a23c6a93d5462a8a1106787368e193b.png)
Button
按钮样式
Capsule:胶囊型按钮(圆角默认为高度的一半)
Circle:圆形按钮
Normal:普通按钮(默认不带圆角)
Button('登录', { type: ButtonType.Capsule, stateEffect: true })
按钮点击事件
Button('登录', { type: ButtonType.Capsule, stateEffect: true })
...
.onClick(() => {
// 处理点击事件逻辑
})
包含子组件
![](https://i-blog.csdnimg.cn/blog_migrate/255b67888e53dd1ee5d5a00a27936aab.png)
LoadingProgress
LoadingProgress()
.color(Color.Blue)
.height(60)
.width(60)
使用资源引用类型
![](https://i-blog.csdnimg.cn/blog_migrate/f4b5310b4fcf7fb2bbaadc01dc9c7c40.png)
Column&Row组件的使用
主轴方向的对齐 .justifyContent(FlexAlign.SpaceBetween)
Start:元素在主轴方向首端对齐,第一个元素与行首对齐,同时后续的元素与前一个对齐
Center:元素在主轴方向中心对齐,第一个元素与行首的距离以及最后一个元素与行尾距离相同
End:元素在主轴方向尾部对齐,最后一个元素与行尾对齐,其他元素与后一个对齐。
SpaceAround
![](https://i-blog.csdnimg.cn/blog_migrate/7af736857e8310db8bc8233b25edbb8e.png)
SpaceEvenly
![](https://i-blog.csdnimg.cn/blog_migrate/a4a63df4c4ac4141a78f26ff93411b93.png)
交叉轴方向的对齐 .margin({ top: 8 })
Column
Start
![](https://i-blog.csdnimg.cn/blog_migrate/2ab222134a3d8da12511ba78ed843d76.png)
Center(默认值)
![](https://i-blog.csdnimg.cn/blog_migrate/380f45c9ced40e9710f3669f7dfd1b85.png)
End
![](https://i-blog.csdnimg.cn/blog_migrate/86d1ab917c98f9bafffd5817f496fafd.png)
Row
Top
![](https://i-blog.csdnimg.cn/blog_migrate/3415874fc88bb9ab6897fb599ea3a0f5.png)
Center(默认值)
![](https://i-blog.csdnimg.cn/blog_migrate/9206309829de4f669dd72d720ae79d4f.png)
Bottom
![](https://i-blog.csdnimg.cn/blog_migrate/a5a3a1c3a60bed81ddfdd333e7fb837f.png)
接口介绍 Row({ space:44 }){}
Column | Column(value?:{space?: string | number}) |
Row | Row(value?:{space?: string | number}) |