HarmonyOS NEXT零基础入门到实战-第四部分

自定义组件:
概念: 由框架直接提供的称为系统组件，由开发者定义的称为自定义组件。
源代码：

@Component
struct MyCom {
build() {
Column() {
Text('我是一个自定义组件')
}
}
}

@Component
struct MyHeader {
build() {
Row() {
Text('我是头部')
.fontColor(Color.White)
}
.width('100%')
.height(50)
.backgroundColor(Color.Brown)
}
}

// 快捷点 comp
@Component
struct MyMain{
build() {
Column() {
MyCom()
MyCom()
}
// .height(400)
.layoutWeight(1)
.width('100%')
.backgroundColor(Color.Gray)
}
}

@Component
struct MyFooter {
build() {
Row() {
Text('我是底部')
.fontColor(Color.White)
}
.width('100%')
.height(50)
.backgroundColor(Color.Green)
}
}

@Entry
@Component
struct Index {
build() {
Column() {
MyHeader()
MyMain()
MyFooter()
}
}
}

自定义组件-通用属性和方法
// 尽量使用按需导出
@priview // 自定义view的预览
@Component
export struct 组件名{}

自定义组件---成员函数变量
除了必须要实现 build() 函数外，还可以定义其它的成员函数，以及成员变量
成员变量的值 -> 外部可传参覆盖也就是带=号的变量及其方法都可以被覆盖
源代码：
@Component
struct MyPanel {
// 成员变量
title: string = '默认的大标题'
extra: string = '查看更多 >'
// 成员变量 - 函数 - 可以外部传入覆盖的
getMore = () => {
AlertDialog.show({
message: '查看更多'
})
}

// 成员函数 - 不可以外部传入覆盖【没有等号】
sayHi() {
AlertDialog.show({
message: '你好'
})
}

build() {
Column() {
Row() {
Text(this.title).fontSize(18)
Text(this.extra).fontSize(18)
.onClick(() => {
this.getMore()
})
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
Row() {
Text('内容部分').fontSize(18)
}
.padding(20)
}
.width('100%')
.height(200)
.padding(10)
.margin({bottom: 20})
.borderRadius(10)
.backgroundColor(Color.White)
}
}

@Entry
@Component
struct Index {
build() {
Column() {
MyPanel({
title: '我的订单',
extra: '全部订单 >',
getMore() {
AlertDialog.show({
message: '查看全部订单'
})
}
})
MyPanel({
title: '小米有品众筹',
extra: '7款众筹中 >',
getMore() {
AlertDialog.show({
message: '查看7款众筹'
})
}
})
}
.width('100%')
.height('100%')
.backgroundColor('#ccc')
.padding(20)
}
}

@BuilderParam 传递UI

利用 @BuilderParam 构建函数，可以让自定义组件允许外部传递UI。

@Component
struct SonCom {
// 1、定义构建函数
@BuilderParam ContentBuilder: () => void = this.defaultBuilder
@Builder
defaultBuilder() {
Text('默认的内容')
.fontColor('#000')
}

build() {
// 2、使用构建函数，构建结构
Column() {
this.ContentBuilder()
}
}
}

@Entry
@Component
struct Index {
build() {
Column() {
// SonCom()
SonCom() {
Button('跳转') // 则显示这个button，否则显示上面默认的内容
}
}
}
}

完善的源代码：
@Component
@Preview
struct MyPanel {
// 成员变量
title: string = '默认的大标题'
extra: string = '查看更多 >'
// 成员变量 - 函数 - 可以外部传入覆盖的
getMore = () => {
AlertDialog.show({
message: '查看更多'
})
}

// 成员函数 - 不可以外部传入覆盖【没有等号】
sayHi() {
AlertDialog.show({
message: '你好'
})
}

@BuilderParam ContentBuilder: () => void = this.defaultBuilder
@Builder
defaultBuilder() {Text('默认文本')}

build() {
Column() {
Row() {
Text(this.title).fontSize(18)
Text(this.extra).fontSize(18)
.onClick(() => {
this.getMore()
})
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
Row() {
// Text('内容部分').fontSize(18)
// 这里的结构不希望写死，需要通过 BuilderParams 来进行构建
this.ContentBuilder()
}
.padding(20)
}
.width('100%')
.height(200)
.padding(10)
.margin({bottom: 20})
.borderRadius(10)
.backgroundColor(Color.White)
}
}

@Entry
@Component
struct Index {
build() {
Column() {
MyPanel({
title: '我的订单',
extra: '全部订单 >',
getMore() {
AlertDialog.show({
message: '查看全部订单'
})
}
}) {
Text('我是订单 - 相关的文本')
}
MyPanel({
title: '小米有品众筹',
extra: '7款众筹中 >',
getMore() {
AlertDialog.show({
message: '查看7款众筹'
})
}
}) {
Button('我是小米有品众筹的按钮')
}
}
.width('100%')
.height('100%')
.backgroundColor('#ccc')
.padding(20)
}
}