前言
模块化思想是将页面拆分为多个组件，从而提高复用性以及可读性。
现有一段代码，效果如下：
这里是代码部分，所有结构都堆在一起，可读性极差，下面分别将头部和商品卡片部分封装为组件。
class Item{
name:string
image:Resource
price:number
dicount:number
constructor(name:string,image:Resource,price:number,dicount?:number) {
this.name = name
this.image = image
this.price = price
this.dicount = dicount
}
}
@Entry
@Component
struct Index {
private items:Array<Item> = [
new Item('商品1',$r('app.media.phone'),6999,500),
new Item('商品2',$r('app.media.phone'),10999,1000),
new Item('商品3',$r('app.media.phone'),999),
new Item('商品4',$r('app.media.phone'),1699),
new Item('商品5',$r('app.media.phone'),2699),
new Item('商品6',$r('app.media.phone'),1699,100),
new Item('商品7',$r('app.media.phone'),699),
new Item('商品8',$r('app.media.phone'),16999),
]
build() {
Column({
space:8}) {
Row(){
Image($r('app.media.back')).width(30)
Text(this.title)
.fontSize(30)
.fontWeight(FontWeight.Bold)
Blank()
Image($r('app.media.reload')).width(30)
}
.width('100%')
.margin({
bottom:20})
// List写法
List({
space:18}){
ForEach(
this.items,
(item:Item)=>{
ListItem(){
Row({
space:20}){
Image(item.image).width(100)
Column({
space:4}){
if(item.dicount && item.dicount > 0){
Text(item.name).fontSize(20).fontWeight(FontWeight.Bold)
Text("原价：￥"+item.price).fontColor('#ccc').fontSize(16).decoration({
type:TextDecorationType.LineThrough})
Text("折扣价：￥"+(item.price-item.dicount)).fontColor('#f36').fontSize(18)
Text("补贴：￥"+item.dicount).fontColor('#f36').fontSize(16)
}else{
Text(item.name).fontSize(20).fontWeight(FontWeight.Bold)
Text("￥"+item.price).fontColor('#f36').fontSize(18)
}
}
.height('100%')
.alignItems(HorizontalAlign.Start)
}
.width('100%')
.height(120)
.backgroundColor("#FFF")
.borderRadius(20)
.padding(10)
}
}
)
}
.width('100%')
.layoutWeight(1) // 布局高度权重，默认为0，越大的元素会占满全部高度
}
.width('100%')
.height('100%')
.padding({
top:10,right:20,bottom:10,left:20})
.backgroundColor('#23df')
}
}
实现模块化的方法
方法一：封装组件
全局组件
适合频繁使用场景
这里用顶部标题区域举例
封装
将Row部分粘贴到一个新文件导出即可，状态title展示标题内容
使用
引入
import {Header} from "../components/common"
使用
Header({title:"商品列表"})
局部组件
适用于只有当前文件需要频繁使用该组件的场景
封装
同方法一中的Header举例，只是将其封装到该文件内部
使用
方法二：自定义构建函数
全局Builder
这里用每个商品卡片举例
封装
格式：@Builder function 组件名(){
结构
}
使用
局部Builder
封装
定义在根组件中即可，需注意不要写function
使用
需要注意，必须添加this
样式的封装
不仅结构可以封装，样式也可以
封装
同组件封装，也有全局和局部之分，全局定义需要有function关键词，局部定义则不写。
@Styles function 样式名(){
.width('100%')
.height('100%')
.padding({
top:10,right:20,bottom:10,left:20})
.backgroundColor('#23df')
}
使用
在相应结构后通过 .样式名 即可使用
注意
@Style中只能定义通用属性，如果添加特有属性样式，出现以下报错
根据提示说明这两个属性不是通用属性，此时需要修改为「继承模式」，继承模式只能写在全局。
封装后代码可读性以及复用性大大提高
