一、概述
官网：FAQ、论坛、活动（活动概览）
页面组件
功能组件：系统组件、自定义组件
每个装饰器有自己特殊的意义和功能
struct是声明组件的关键字
build函数可以没有内容，如果有的话，必须有且只有一个容器组件（只有entry里面有限制，component里面没有限制）
Kit是Next版本中鸿蒙将各个能力集进行了统一的分类
Column：列组件（纵向排列）
Row：行组件（横向排列）
Flex：以弹性方式布局子组件的容器组件
Stack：堆叠容器
Grid：网格容器（由行和列分割的单元格所组成）
GridRow：栅格容器组件
GridCol：栅格子组件
List：仅支持ListItem子组件
Scroll：仅支持单个子组件
Text：文本组件（Span子组件、ImageSpan子组件）
Image：图片
Button：按钮
TextInput：输入框组件
通用属性
内置组件：API参考 => 应用框架 => ArkUI => ArkTS组件
comp可以快速生成组件的结构代码
@Entry
@Component
struct Index {
build() {
Column() {
GridRow({ columns: 4 }) { // 设置一行几列
GridCol() {
}
GridCol() {
}
GridCol() {
}
GridCol() {
}
GridCol() {
}
}
}
.height('100%')
.width('100%')
}
}
@Entry
@Component
struct Index {
build() {
Column() {
Row() {
}
.width('100%')
.height(50)
// 默认是垂直滚动
Scroll() {
Column() {
}
.width('100%')
}
.layoutWeight(1)
// 顶部开始方法
.align(Alignment.Top)
Row() {
}
.width('100%')
.height(50)
}
.height('100%')
.width('100%')
}
}
通过控制器操作滚动的位置
双向绑定
@Entry
@Component
struct Index {
@State message: string = ''
@State isSelect: boolean = false
@State date: Date = new Date()
build() {
Column() {
Text('textInput:' + this.message)
// $$：帮你绑定了onchange事件更新值
TextInput({ text: $$this.message })
Divider().strokeWidth(2)
Text('checkbox:' + this.isSelect)
Checkbox()
.select($$this.isSelect)
Divider().strokeWidth(2)
Text('datePicker:' + this.date)
DatePicker({ selected: $$this.date })
}
.height('100%')
.width('100%')
}
}
枚举就是对一些值进行语义化的描述（数字无法体现代码含义）
layoutWeight：占剩余空间的比例
string.json：Open editor
import { promptAction } from '@kit.ArkUI'
// 组件外的函数
function sayHi() {
promptAction.showToast({
message: 'hi'
})
}
stateStyles（多态样式）：可以依据组件的内部状态的不同快速设置不同样式
@Entry
@Component
struct Index {
build() {
Column() {
Row() {
}
.width('100%')
.height(50)
// 直接给组件设置的样式也属于常态
.backgroundColor(Color.Black)
.stateStyles({
pressed: {
// 按压下的样式
.backgroundColor(Color.Red)
}
})
Row() {
Text('哈哈哈哈哈哈哈')
}
.width('100%')
.padding(20)
.border({
width: 2,
color: '#ccc'
})
.stateStyles({
// 默认状态
normal: {
.backgroundColor(Color.Blue)
},
pressed: {
.backgroundColor(Color.Red)
}
})
}
.height('100%')
.width('100%')
}
}
注
@黑（24）[]【$$】
5期
