简单的组件学习：
/**
* weip 自定义控件
* 自定义构建函数也是需要充电的地方，分全局和局部的
* 全局：需要添加function关键字 局部：不加function关键字
* @Styles function 自定义公共样式 分全局和局部
* @Extends(Text) 继承模式 只能写成全局的
* export:导出组件
*/
@Component
export struct Header {
private title: ResourceStr;
build() {
// 标题部分
Row() {
// 资源自行替换，返回icon
Image($r('app.media.app_icon'))
.width(30)
Text(this.title)
.fontSize(30)
.fontWeight(FontWeight.Bold)
Blank()
// 资源自行替换，分享icon
Image($r('app.media.app_icon'))
.width(30)
}
.width('100%')
.height(30)
}
}
ImagesPage.ets:
引用header组件
/**
* 导入head组件
*/
import { Header } from '../components/HeadComponents'
// 全局自定义构建函数 function：代表全局
@Builder function ItemCard() {
}
// 组件内的局部函数需要加this
// 自定义公共样式
@Styles function fillScreen() {
.width('100%')
.height('100%')
.backgroundColor('#EFEFEF')
.padding(20)
}
// 自定义字体样式 需使用Extend() 继承模式，只能写在全局位置
@Extend(Text) function priceText() {
.fontSize(18)
.fontColor('#F36')
}
@Entry
@Component
struct Index {
@State imageWidth: number = 150
// ForEach：循环遍历数组，根据数组内容渲染页面组件，超过屏幕的东西就看不到，也滑动不了，所以后面统一使用List组件
build() {
// 纵向布局 主轴/交叉轴，一般只设置主轴，不设置交叉轴
Column() {
// 标题
Header({title: "图片详情"})
.padding({left: 20, top: 20, right: 20, bottom: 20})
// 横向布局 主轴/交叉轴，一般只设置主轴，不设置交叉轴
Row(){
Image($r('app.media.icon'))
.width(this.imageWidth)
.interpolation(ImageInterpolation.High)
}
.width('100%')
.height(400)
.justifyContent(FlexAlign.Center)
// Row容器 放一行
Row() {
Text($r('app.string.width_label'))
.fontSize(20)
.fontWeight(FontWeight.Bold)
.fontColor('#663')
TextInput({ placeholder: '请输入图片宽度', text:this.imageWidth.toFixed(0) })
.width(150)
.backgroundColor('#FFF')
.type(InputType.Number)
.onChange(value => {
console.log(value)
this.imageWidth = parseInt(value)
})
}
.width('100%')
.padding({left: 14,right: 14})
.justifyContent(FlexAlign.SpaceBetween) // 中间留空
// 分割线
Divider()
.width('91%')
// 两个按钮
Row(){
Button('缩小')
.width(80)
.fontSize(20)
.onClick(() => {
if (this.imageWidth >= 10) {
this.imageWidth -= 10;
}
})
Button('放大')
.width(80)
.fontSize(20)
.onClick(() => {
if (this.imageWidth < 300) {
this.imageWidth += 10;
}
})
}
.width('100%')
.margin({top: 35, bottom: 35})
.justifyContent(FlexAlign.SpaceEvenly)
Slider({
min: 100,
max: 300,
value: this.imageWidth,
step: 10
})
.width('100%')
.blockColor('#36D')
.trackThickness(7)
.showTips(true)
.onChange(value => {
// value:当前滑块值
this.imageWidth = value;
})
}
.width('100%')
.height('100%')
}
}
/**
* struct:自定义组件 可复用的UI单元
* 装饰器：用来装饰类结构、方法、变量
* @Component：标记自定义组件
* @Entry：标记当前组件是入口组件
* @State：标记一个变量是状态变量，值变化时会触发UI更新
* build（）：UI描述，其内部以声明式方式描述UI结构
* 内置组件：ArkUI提供的组件，比如容器组件如Row、Column
* 基础组件：自带样式和功能的页面元素，如Text
* 属性方法：设置组件的UI样式
* 事件方法：设置组件的事件回调
* 组件通用属性、特有属性（图片插值）
*/
Index.ets:
一般是应用程序的入口
@Entry // 入口組件
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.fontColor('#36D')
.onClick(() => {
this.message = 'Hello ArkTS!';
})
// Image('https://bkimg.cdn.bcebos.com/pic/bd315c6034a85edf8db139b7db031e23dd54564edf55?x-bce-process=image/format,f_auto/quality,Q_70/resize,m_lfit,limit_1,w_536')
// .width('50%')
// 引用本地图片资源地址
Image($r('app.media.icon'))
.width(250)
.interpolation(ImageInterpolation.High)
}
.width('100%')
}
.height('100%')
}
}
/**
* struct:自定义组件 可复用的UI单元
* 装饰器：用来装饰类结构、方法、变量
* @Component：标记自定义组件
* @Entry：标记当前组件是入口组件
* @State：标记一个变量是状态变量，值变化时会触发UI更新
* build（）：UI描述，其内部以声明式方式描述UI结构
* 内置组件：ArkUI提供的组件，比如容器组件如Row、Column
* 基础组件：自带样式和功能的页面元素，如Text
* 属性方法：设置组件的UI样式
* 事件方法：设置组件的事件回调
* 组件通用属性、特有属性（图片插值）
*/
PropPage.ets:
/**
* 自定义任务类
*/
class Task {
// 静态变量，所有对象共享变量
static id: number = 1
// 任务名称 半角：``
name: string = `任务${Task.id++}`
// 任务状态：是否完成
finished: boolean = false
}
// 统一的卡片样式
@Styles function card() {
.width('95%')
.padding(20)
.backgroundColor(Color.White)
.borderRadius(15)
.shadow({radius: 6, color: '#1F000000', offsetX: 2, offsetY: 4})
}
// 任务完成样式
@Extend(Text) function finishedTask() {
.decoration({type: TextDecorationType.LineThrough})
.fontColor('#B1B2B1')
}
// 任务统计信息的实体类【c】
class StaticInfo {
totalTask: number = 0;
finishTask: number = 0;
}
@Entry
@Component
struct PropPage {
// 总任务数量
@State totalTask: number = 0
// 已完成任务数量
@State finishTask: number = 0
build() {
Column({space: 10}){
// 任务进度卡片 子组件
TaskStatistics({finishTask:this.finishTask, totalTask: this.totalTask})
// 任务列表，包含新增任务 @Link totalTask：$finishTask:变量的引用
TaskList({finishTask:$finishTask, totalTask: $totalTask})
}
.width('100%')
.height('100%')
.backgroundColor('#F1F2F3')
}
}
@Component
struct TaskList {
// 总任务数量
@Link totalTask: number
// 已完成任务数量
@Link finishTask: number
// 任务数组
@State tasks: Task[] = []
handleTaskChange(){
// 更新任务总数量
this.totalTask = this.tasks.length
// 更新已完成任务数量
this.finishTask = this.tasks.filter(item => item.finished).length
}
build() {
Column() {
// 2、新增任务按钮
Button('新增任务')
.width(200)
.onClick(() => {
// 新增任务数据
this.tasks.push(new Task())
// 更新任务总数量
this.handleTaskChange()
})
// 3、任务列表
List({space: 10}) {
ForEach(
this.tasks,
(item: Task, index) => {
ListItem() {
Row() {
// 任务名
Text(item.name)
.fontSize(20)
// 任务复选框
Checkbox()
.select(item.finished)
.onChange(isSelected => {
// 任务状态发生变更，更新当前任务状态
item.finished = isSelected
// 更新已完成任务数量
this.handleTaskChange()
})
}
.card()
.justifyContent(FlexAlign.SpaceBetween)
}
.swipeAction({end: this.DeleteButton(index)})
}
)
}
.width('100%')
.layoutWeight(1)
.alignListItem(ListItemAlign.Center)
}
}
@Builder DeleteButton(index: number) {
Button(){
Image($r('app.media.icon'))
.fillColor(Color.White)
.width(20)
}
.width(40)
.height(40)
.type(ButtonType.Circle)
.backgroundColor(Color.Red)
.margin(5)
.onClick(() => {
// 从角标开始删 删1个
this.tasks.splice(index, 1)
this.handleTaskChange()
})
}
}
/**
* 任务进度卡片 子组件
* 子组件是TaskStatistics 此时父组件是PropPage.ets
* Prop:变量不能初始化 单向同步【父组件-->子组件】
* Link:支持传对象 Prop：不支持传对象
* provider 跨组件传输
* consume 跨组件传输
*/
@Component
struct TaskStatistics {
// 总任务数量
@Prop totalTask: number
// 已完成任务数量
@Prop finishTask: number
build() {
Row() {
// 任务进度
Text('任务进度')
.fontSize(30)
.fontWeight(FontWeight.Bold)
// 堆叠容器
Stack() {
// 进度条
Progress({
value: this.finishTask,
total: this.totalTask,
type: ProgressType.Ring
})
// 1/5
Row() {
Text(this.finishTask.toString())
.fontSize(24)
.fontColor('#36D')
Text(' / ' + this.totalTask.toString())
.fontSize(24)
}
}
}
.card()
.margin({top: 20, bottom: 20})
.justifyContent(FlexAlign.SpaceEvenly)
}
}
预览效果图：
注解的学习：
/**
* 自定义任务类
*/
class Task {
// 静态变量，所有对象共享变量
static id: number = 1
// 任务名称 半角：``
name: string = `任务${Task.id++}`
// 任务状态：是否完成
finished: boolean = false
}
// 统一的卡片样式
@Styles function card() {
.width('95%')
.padding(20)
.backgroundColor(Color.White)
.borderRadius(15)
.shadow({radius: 6, color: '#1F000000', offsetX: 2, offsetY: 4})
}
// 任务完成样式
@Extend(Text) function finishedTask() {
.decoration({type: TextDecorationType.LineThrough})
.fontColor('#B1B2B1')
}
// 任务统计信息的实体类
class StatInfo {
totalTask: number = 0;
finishTask: number = 0;
}
/**
* 父组件
*/
@Entry
@Component
struct PropPage {
// 统计信息 【父亲】
@State stat: StatInfo = new StatInfo()
build() {
Column({space: 10}){
// 任务进度卡片 子组件
TaskStatistics({finishTask:this.stat.finishTask, totalTask: this.stat.totalTask})
// 任务列表，包含新增任务 @Link totalTask：$finishTask:变量的引用
TaskList({stat:$stat})
}
.width('100%')
.height('100%')
.backgroundColor('#F1F2F3')
}
}
@Component
struct TaskList {
// 统计信息【儿子】 Link可以传对象
@Link stat: StatInfo
// 任务数组
@State tasks: Task[] = []
handleTaskChange(){
// 更新任务总数量
this.stat.totalTask = this.tasks.length
// 更新已完成任务数量
this.stat.finishTask = this.tasks.filter(item => item.finished).length
}
build() {
Column() {
// 2、新增任务按钮
Button('新增任务')
.width(200)
.onClick(() => {
// 新增任务数据
this.tasks.push(new Task())
// 更新任务总数量
this.handleTaskChange()
})
// 3、任务列表
List({space: 10}) {
ForEach(
this.tasks,
(item: Task, index) => {
ListItem() {
Row() {
// 任务名
Text(item.name)
.fontSize(20)
// 任务复选框
Checkbox()
.select(item.finished)
.onChange(isSelected => {
// 任务状态发生变更，更新当前任务状态
item.finished = isSelected
// 更新已完成任务数量
this.handleTaskChange()
})
}
.card()
.justifyContent(FlexAlign.SpaceBetween)
}
.swipeAction({end: this.DeleteButton(index)})
}
)
}
.width('100%')
.layoutWeight(1)
.alignListItem(ListItemAlign.Center)
}
}
@Builder DeleteButton(index: number) {
Button(){
Image($r('app.media.icon'))
.fillColor(Color.White)
.width(20)
}
.width(40)
.height(40)
.type(ButtonType.Circle)
.backgroundColor(Color.Red)
.margin(5)
.onClick(() => {
// 从角标开始删 删1个
this.tasks.splice(index, 1)
this.handleTaskChange()
})
}
}
/**
* 任务进度卡片 子组件
* 子组件是TaskStatistics 此时父组件是PropPage.ets
* Prop:变量不能初始化 单向同步【父组件-->子组件】
* Link:支持传对象 Prop：不支持传对象
* provider 跨组件传输
* consume 跨组件传输
*/
@Component
struct TaskStatistics {
// 总任务数量
@Prop totalTask: number
// 已完成任务数量
@Prop finishTask: number
build() {
Row() {
// 任务进度
Text('任务进度')
.fontSize(30)
.fontWeight(FontWeight.Bold)
// 堆叠容器
Stack() {
// 进度条
Progress({
value: this.finishTask,
total: this.totalTask,
type: ProgressType.Ring
})
// 1/5
Row() {
Text(this.finishTask.toString())
.fontSize(24)
.fontColor('#36D')
Text(' / ' + this.totalTask.toString())
.fontSize(24)
}
}
}
.card()
.margin({top: 20, bottom: 20})
.justifyContent(FlexAlign.SpaceEvenly)
}
}
跨组件传输数据：
@Provider @Consume
这种相对比较费内存，非跨组件不建议使用
/**
* 自定义任务类
*/
class Task {
// 静态变量，所有对象共享变量
static id: number = 1
// 任务名称 半角：``
name: string = `任务${Task.id++}`
// 任务状态：是否完成
finished: boolean = false
}
// 统一的卡片样式
@Styles function card() {
.width('95%')
.padding(20)
.backgroundColor(Color.White)
.borderRadius(15)
.shadow({radius: 6, color: '#1F000000', offsetX: 2, offsetY: 4})
}
// 任务完成样式
@Extend(Text) function finishedTask() {
.decoration({type: TextDecorationType.LineThrough})
.fontColor('#B1B2B1')
}
// 任务统计信息的实体类
class StatInfo {
totalTask: number = 0;
finishTask: number = 0;
}
/**
* 父组件
*/
@Entry
@Component
struct PropPage {
// 统计信息 【父亲】
@Provide stat: StatInfo = new StatInfo()
build() {
Column({space: 10}){
// 任务进度卡片 子组件
TaskStatistics()
// 任务列表，包含新增任务 @Link totalTask：$finishTask:变量的引用
TaskList()
}
.width('100%')
.height('100%')
.backgroundColor('#F1F2F3')
}
}
@Component
struct TaskList {
// 统计信息【儿子】 Link可以传对象
@Consume stat: StatInfo
// 任务数组
@State tasks: Task[] = []
handleTaskChange(){
// 更新任务总数量
this.stat.totalTask = this.tasks.length
// 更新已完成任务数量
this.stat.finishTask = this.tasks.filter(item => item.finished).length
}
build() {
Column() {
// 2、新增任务按钮
Button('新增任务')
.width(200)
.onClick(() => {
// 新增任务数据
this.tasks.push(new Task())
// 更新任务总数量
this.handleTaskChange()
})
// 3、任务列表
List({space: 10}) {
ForEach(
this.tasks,
(item: Task, index) => {
ListItem() {
Row() {
// 任务名
Text(item.name)
.fontSize(20)
// 任务复选框
Checkbox()
.select(item.finished)
.onChange(isSelected => {
// 任务状态发生变更，更新当前任务状态
item.finished = isSelected
// 更新已完成任务数量
this.handleTaskChange()
})
}
.card()
.justifyContent(FlexAlign.SpaceBetween)
}
.swipeAction({end: this.DeleteButton(index)})
}
)
}
.width('100%')
.layoutWeight(1)
.alignListItem(ListItemAlign.Center)
}
}
@Builder DeleteButton(index: number) {
Button(){
Image($r('app.media.icon'))
.fillColor(Color.White)
.width(20)
}
.width(40)
.height(40)
.type(ButtonType.Circle)
.backgroundColor(Color.Red)
.margin(5)
.onClick(() => {
// 从角标开始删 删1个
this.tasks.splice(index, 1)
this.handleTaskChange()
})
}
}
/**
* 任务进度卡片 子组件
* 子组件是TaskStatistics 此时父组件是PropPage.ets
* Prop:变量不能初始化 单向同步【父组件-->子组件】
* Link:支持传对象 Prop：不支持传对象
* provider 跨组件传输
* consume 跨组件传输
*/
@Component
struct TaskStatistics {
// 统计信息
@Consume stat: StatInfo
build() {
Row() {
// 任务进度
Text('任务进度')
.fontSize(30)
.fontWeight(FontWeight.Bold)
// 堆叠容器
Stack() {
// 进度条
Progress({
value: this.stat.finishTask,
total: this.stat.totalTask,
type: ProgressType.Ring
})
// 1/5
Row() {
Text(this.stat.finishTask.toString())
.fontSize(24)
.fontColor('#36D')
Text(' / ' + this.stat.totalTask.toString())
.fontSize(24)
}
}
}
.card()
.margin({top: 20, bottom: 20})
.justifyContent(FlexAlign.SpaceEvenly)
}
}
// bind(this)
/**
* 自定义任务类
*/
@Observed
class Task {
// 静态变量，所有对象共享变量
static id: number = 1
// 任务名称 半角：``
name: string = `任务${Task.id++}`
// 任务状态：是否完成
finished: boolean = false
}
// 统一的卡片样式
@Styles function card() {
.width('95%')
.padding(20)
.backgroundColor(Color.White)
.borderRadius(15)
.shadow({radius: 6, color: '#1F000000', offsetX: 2, offsetY: 4})
}
// 任务完成样式
@Extend(Text) function finishedTask() {
.decoration({type: TextDecorationType.LineThrough})
.fontColor('#B1B2B1')
}
// 任务统计信息的实体类
class StatInfo {
totalTask: number = 0;
finishTask: number = 0;
}
/**
* 父组件
*/
@Entry
@Component
struct PropPage {
// 统计信息 【父亲】
@Provide stat: StatInfo = new StatInfo()
build() {
Column({space: 10}){
// 任务进度卡片 子组件
TaskStatistics()
// 任务列表，包含新增任务 @Link totalTask：$finishTask:变量的引用
TaskList()
}
.width('100%')
.height('100%')
.backgroundColor('#F1F2F3')
}
}
@Component
struct TaskList {
// 统计信息【儿子】 Link可以传对象
@Consume stat: StatInfo
// 任务数组
@State tasks: Task[] = []
handleTaskChange(){
// 更新任务总数量
this.stat.totalTask = this.tasks.length
// 更新已完成任务数量
this.stat.finishTask = this.tasks.filter(item => item.finished).length
}
build() {
Column() {
// 2、新增任务按钮
Button('新增任务')
.width(200)
.onClick(() => {
// 新增任务数据
this.tasks.push(new Task())
// 更新任务总数量
this.handleTaskChange()
})
// 3、任务列表
List({space: 10}) {
ForEach(
this.tasks,
(item: Task, index) => {
ListItem() {
// bind(this) 绑定父组件的this
TaskItem({item: item, onTaskChange: this.handleTaskChange.bind(this)})
}
.swipeAction({end: this.DeleteButton(index)})
}
)
}
.width('100%')
.layoutWeight(1)
.alignListItem(ListItemAlign.Center)
}
}
@Builder DeleteButton(index: number) {
Button(){
Image($r('app.media.icon'))
.fillColor(Color.White)
.width(20)
}
.width(40)
.height(40)
.type(ButtonType.Circle)
.backgroundColor(Color.Red)
.margin(5)
.onClick(() => {
// 从角标开始删 删1个
this.tasks.splice(index, 1)
this.handleTaskChange()
})
}
}
/**
* 自定义任务的item项
* 方法传递
*/
@Component
struct TaskItem {
@ObjectLink item: Task
// 变量的类型是个函数类型
onTaskChange: () => void
build() {
Row() {
// 任务名 如果完成，需要变灰
if (this.item.finished) {
Text(this.item.name)
.fontSize(20)
.finishedTask()
} else {
Text(this.item.name)
.fontSize(20)
}
// 任务复选框
Checkbox()
.select(this.item.finished)
.onChange(isSelected => {
// 任务状态发生变更，更新当前任务状态
this.item.finished = isSelected
// 更新已完成任务数量
//this.handleTaskChange()
this.onTaskChange()
})
}
.card()
.justifyContent(FlexAlign.SpaceBetween)
}
}
/**
* 任务进度卡片 子组件
* 子组件是TaskStatistics 此时父组件是PropPage.ets
* Prop:变量不能初始化 单向同步【父组件-->子组件】
* Link:支持传对象 Prop：不支持传对象
* provider 跨组件传输
* consume 跨组件传输
*/
@Component
struct TaskStatistics {
// 统计信息
@Consume stat: StatInfo
build() {
Row() {
// 任务进度
Text('任务进度')
.fontSize(30)
.fontWeight(FontWeight.Bold)
// 堆叠容器
Stack() {
// 进度条
Progress({
value: this.stat.finishTask,
total: this.stat.totalTask,
type: ProgressType.Ring
})
// 1/5
Row() {
Text(this.stat.finishTask.toString())
.fontSize(24)
.fontColor('#36D')
Text(' / ' + this.stat.totalTask.toString())
.fontSize(24)
}
}
}
.card()
.margin({top: 20, bottom: 20})
.justifyContent(FlexAlign.SpaceEvenly)
}
}
