完全0储备小白快速上手学会鸿蒙应用开发-第四天：ArkUI高阶基础
Password：密码框，会让输入的内容变小圆点，以及多了一个查看密码的图标。声明在组件外的变量叫全局变量，顾名思义：它在这个文件里的所有组件中都能用。声明在组件内的变量叫组件的成员变量，顾名思义：它只能在这个组件范围内使用。确实能设置子组件在交叉轴的排列，但是它是统一设置的。就是装饰器，它描述了函数，让函数具有了特殊作用：也即它本来不能封装组件，但是用了。事件：指的是应用接收到了用户的操作，继而
·
设置单个子元素交叉轴对齐方式
需求
之前学习的alignItems确实能设置子组件在交叉轴的排列，但是它是统一设置的。像上面这个需求就实现不了。
上面需求需要单独设置某一个在交叉轴的排列
语法
.alignSelf(ItemAlign）
Start
起点
Center
居中
End
终点
代码
@Entry
@Component
structIndex{
@Statemessage:string='HelloWorld';
build(){
Column(){
Column(){
Text('')
.width(80)
.height(80)
.backgroundColor('#f00')
.borderRadius('50%')
Text('')
.width(80)
.height(80)
.backgroundColor('#f00')
.borderRadius('50%')
Text('')
.width(80)
.height(80)
.backgroundColor('#f00')
.borderRadius('50%')
.alignSelf(ItemAlign.End
}
.width(320)
.height(320)
.border({width:5})
.justifyContent(FlexAlign.SpaceAround)
.padding(10)
//.alignItems(HorizontalAlign.Start)//设置在交叉轴的排列，是统一设置所有子组件
}
.height('100%').width('100%')
}
}
布局练习-骰子面
代码
@Entry
@Component
structIndex{
@Statemessage:string='HelloWorld';
build(){
Column(){
Column(){
Row(){
Text('')
.width(80)
.height(80)
.backgroundColor('#f00')
.borderRadius('50%')
Text('')
.width(80)
.height(80)
.backgroundColor('#f00')
.borderRadius('50%')
}
.justifyContent(FlexAlign.SpaceAround)
.width('100%')
Text('')
.width(80)
.height(80)
.backgroundColor('#f00')
.borderRadius('50%')
Row(){
Text('')
.width(80)
.height(80)
.backgroundColor('#f00')
.borderRadius('50%')
Text('')
.width(80)
.height(80)
.backgroundColor('#f00')
.borderRadius('50%')
}
.justifyContent(FlexAlign.SpaceAround)
.width('100%')
}
.width(320)
.height(320)
.border({width:5})
.justifyContent(FlexAlign.SpaceAround)
.padding(10)
}
.height('100%')
.width('100%')
}
}
@Builder封装组件
根据上面的骰子点数代码发现，每个点数，也即Text这个组件，多处使用，代码完全一样。所以应该封装成函数。
但是普通函数里面不能放组件的代码，否则会报错。此时只需要将函数前面加一个@Builder即可解决
也就是说，以后用@Builder装饰的函数，里面就可以封装组件代码
例
@Builder
functiondian(align:ItemAlign){
Text('')
.width(80)
.height(80)
.backgroundColor('#f00').borderRadius('50%')
.alignSelf(align)
}
装饰器的概念
什么是装饰器？
就是用来描述一段数据，让这段数据具有特殊作用，这段描述就叫装饰器
例如：
上面的@Builder就是装饰器，它描述了函数，让函数具有了特殊作用：也即它本来不能封装组件，但是用了@Builder装饰后，就能封装组件了
装饰器-@Component
@Component的作用是：把一段struct数据变成自定义组件
自定义组件基本使用
声明一个自定义组件
//声明一个自定义组件
@Component
struct组件名{
build(){
//描述长什么样子
}
}
如何使用？
跟内置组件一样的用法。也即内置怎么用，自定义组件就怎么用
组件名()
.属性()
例
// 声明一个自定义组件
@Component
struct MyBox {
build() {
// 描述长什么样子
Row() {
}
.width(300)
.height(300)
.backgroundColor('#0f0')
}
}
使用时只需要写
MyBox()
.border({ width:2 }) // 像内置组件一样可以再加属性
装饰器 - @Entry
它是用来装饰组件的
代表一个页面里以哪个组件作为显示的入口
件的细节
1. 组件名要用大驼峰：每个单词首字母都大写
2. 每个组件都有且只有一个根节点
build函数里，最外面的那个组件就叫根节点
Button的使用
语法
Button('按钮的文字')
有三种样式
通过.type属性设置
给ButtonType枚举
capsule：胶囊型，默认值
Normal：无圆角，四周尖的
Circle：圆形按钮
按钮里也可以放图片，放图片后，按钮会自动变圆形
Button() {
Image($r('app.media.del'))
.width(50)
}
.backgroundColor('#f00')
.width(80)
.height(80)
点击事件
点击：如果是电脑上是鼠标点左键，触摸板上轻按，移动设备上按压
事件：指的是应用接收到了用户的操作，继而要有什么反应去反馈用户的操作
语法
95%组件都能有点击事件
组件()
.onClick( () => {
// 当用户点击了这个组件，会调用这个函数
} )
例
Button('点我')
.onClick( () => {
console.log('按钮被点了')
} )
弹出提示框
记住关键字： prompt
完整的名字是： promptAction
用法
promptAction.showToast( { message: '欢迎你！' } )用 之前要导入
import { promptAction } from '@kit.ArkUI';
鸿蒙开发中默认只提供了基础功能，其他有些功能用之前要找到它（导入它）
技巧：当我们在DevEco里输入 prompt 后会有提示，找到带文件夹的图标按回车，它会自动补全代
码以及帮我们做导入，如下图，出提示后选中对应的按回车即可
全局变量与组件内的成员变量
声明在组件外的变量叫全局变量，顾名思义：它在这个文件里的所有组件中都能用。使用时直接用
变量名，不用加this
声明在组件内的变量叫组件的成员变量，顾名思义：它只能在这个组件范围内使用。使用时需要前
面加this.
例
let str1: string = '我是全局变量' // 全局变量 几乎不会用全局变量
@Component
struct Index {
// 其实也是在声明变量 - 组件内成员变量
@State message: string = 'Hello World';
build() {
Column() {
// 使用上的区别
Text(str1) // 使用全局变量 --- 直接写变量名
Text(this.message) // 使用成员变量 --- 前面要加this
}
.height('100%')
.width('100%')
}
}
@Entry
@Component
struct MyBox {
// 每个组件都有自己的成员变量，互不影响
@State message: string = '我是MyBox里的message'
build() {
Column(){
Text(str1)
Text(this.message)
}
.width(300)
.height(300)
.backgroundColor('#0f0')
}
}
每个组件可以有自己的成员变量，名字也可以一样。互不影响
装饰器 - @State
专门用来修饰变量的
作用：让这个变量具备一旦改变就能触发界面更新的功能
TextInput
也叫输入框
用法：
TextInput()
.属性()
默认情况下，输入框是一个输入任意字符的输入框，而且明文
如果想切换形态，用 type 属性
type给的是 InputType 的枚举，常见的有
Normal：默认值
Password：密码框，会让输入的内容变小圆点，以及多了一个查看密码的图标
Number：只能输入数字，弹出的也是数字键盘
PhoneNumber：输入电话号码的
Email： 输入电子邮箱的
如何拿到输入的内容？
使用双向绑定语法，图解如下
语法
TextInput( { placeholder: '占位符', text: $$组件的成员变量 } )
跟输入框有关的两个事件
onChange
输入的内容一旦有变化就触发
onSubmit
按回车（完成）触发
综合案例：登录界面
点击登录要提示登录成功！
程序的默认执行
从上往下依次执行的，也叫顺序结构
分支语句之if
分支语句：
根据某种条件去选择执行某个语句，或者不执行某个语句（或者执行另外个语句）
语法：
if (条件) {
// 代码1
}else {
// 代码2
}
当if右边的小括号条件的结果为true，就执行代码1，如果为false就执行代码2
比较运算符
> ： 判断左边是否大于右边
< ： 判断左边是否小于右边
>= ：判断左边是否大于或等于右边
<= ：判断左边是否小于或等于右边
=== ：判断左右两边是否相等
!== ：判断左右两边是否不同
以上运算得到的结果要么是true、要么是false
逻辑运算符
&& ：
叫逻辑与，也可以读作并且
语法
数据1 && 数据2
据1的结果为true，且数据2的结果也为true，整个结果才会得到true
数据1和数据2有一个结果是false，整个结果就是false
||
叫逻辑或，也可以读作或者
数据1 || 数据2
只要有一个是true，结果一定是true
两个都是false，结果才是false
讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。
更多推荐
21
0- 0
已为社区贡献10条内容
所有评论(0)