> 文档中心 > 梅科尔工作室-孟令子-鸿蒙笔记1、2

梅科尔工作室-孟令子-鸿蒙笔记1、2

主要目录配置文件作用
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)

更换应用图标和名字

  1. 复制想要图片,粘贴到如下图文件夹中

       2.在config.json中打开,更改红框中引号的内容(Ctrl+鼠标左键点击label可跳转3中的三个文件)


       3.更改这三个文件中的value

 

项目远程模拟方法

  1. 登录华为账号并进行实名认证

  2. 进入Device Manager

  3. 进入后随机点一个运行

  4. 随后成功运行

常用基础组件

Text
文本样式

文本对齐方式
Start(默认值):水平对齐首部

Center:水平居中对齐

End:水平对齐尾部

例:Text('HarmonyOS')

.textAlign(TextAlign.Start)

文本超长显示

 

文本装饰线
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')

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)

光标位置

获取输入文本

 

Button
按钮样式

Capsule:胶囊型按钮(圆角默认为高度的一半)

Circle:圆形按钮

Normal:普通按钮(默认不带圆角)

Button('登录', { type: ButtonType.Capsule, stateEffect: true })

按钮点击事件
Button('登录', { type: ButtonType.Capsule, stateEffect: true })

...

.onClick(() => {
// 处理点击事件逻辑

})

包含子组件

LoadingProgress

LoadingProgress()

.color(Color.Blue)

.height(60)

.width(60)

使用资源引用类型

Column&Row组件的使用
主轴方向的对齐 .justifyContent(FlexAlign.SpaceBetween)

Start:元素在主轴方向首端对齐,第一个元素与行首对齐,同时后续的元素与前一个对齐

Center:元素在主轴方向中心对齐,第一个元素与行首的距离以及最后一个元素与行尾距离相同

End:元素在主轴方向尾部对齐,最后一个元素与行尾对齐,其他元素与后一个对齐。

SpaceAround


SpaceEvenly

 

交叉轴方向的对齐 .margin({ top: 8 })

Column
Start


Center(默认值)

 

End


Row

top

 

Center(默认值)


Bottom

医疗百科