网站建设互联网营销营销推广,天河外贸网站建设,电子商务基础网站建设与维护单项选择题,wordpress后台菜单添加设置按钮提示#xff1a;文章写完后#xff0c;目录可以自动生成#xff0c;如何生成可参考右边的帮助文档 文章目录 一、关于样式1 . 默认单位 vp2 . 写公共样式 二 、 加载图片三 、 父子组件传值四 、 自定义构建函数 Builder五、构建函数-BuilderParam 传递UI 一、关于样式
1 .… 提示文章写完后目录可以自动生成如何生成可参考右边的帮助文档 文章目录 一、关于样式1 . 默认单位 vp2 . 写公共样式 二 、 加载图片三 、 父子组件传值四 、 自定义构建函数 Builder五、构建函数-BuilderParam 传递UI 一、关于样式
1 . 默认单位 vp
答 vp 是 virtual pixel 的缩写根据设备像素密度转化为屏幕物理像素px 直接表示设备的像素因为我们设备的分辨率密度不同最好是使用 vp
适配 可以使用伸缩布局layoutWeight,flex布局网格系统栅格系统布局
2 . 写公共样式
在开发过程中会出现大量代码在进行重复样式设置Styles 和 Extend 可以帮我们进行样式复用 1. styles 方式
只支持通用属性 和 通用事件且不支持箭头函数语法在组件内局部无需加 function , 在组件外全局 定义时要加function
Styles function textStyle () {.width(100).height(50).backgroundColor(Color.Pink).borderRadius(25).onClick(() {promptAction.showToast({message: 测试})})
}2. Extend 方式
使用 Extend 装饰器修饰的函数只能是 全局且参数可以是一个函数实现复用事件且可处理不同逻辑函数可以进行 传参如果参数是状态变量状态更新后会刷新UI
// 全局 原生组件 参数
// ↓ ↓ ↓
Extend(Text) function textInputAll (callback?: () void) {.width(100).height(50).backgroundColor(Color.Pink).borderRadius(25).textAlign(TextAlign.Center).fontColor(Color.White).onClick(() {callback callback()})
}二 、 加载图片
使用本地图片
// 可以新建一个文件夹里面放本地图片ets下
Image(/assets/a.png)使用 resource 下的 media 图片
// resource/media (a 是文件名扩展名省略)
Image($r(/app.media.a))使用 resource 下的 rawfile 图片
// resource/rawfile
Image($rawfile(a.png))使用网络图片(必须申请网络权限)
// resource/rawfile
Image(https://gimg2.baidu.com/image_search/srchttp%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F2bf1b169-d217-44c3-a5b3-dd00813bc20d%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpgreferhttp%3A%2F%2Fsafe-img.xhscdn.comapp2002sizef9999,10000qa80n0g0nfmtauto?sec1704614176te15a2fd5193aeeb24fc95b5dbe395907)requestPermissions: [{name:ohos.permission.INTERNET
}],三 、 父子组件传值
父传子
// 父组件的子组件上传递一个对象HmCommentItemHmCommentItem({ item:item})
// 子组件上进行接收item: PartialReplyItem {} // 默认是public子传父目的是修改父组件的值
// 父组件的子组件上传递一个方法HmCommentItemHmCommentItem({ item:item,changeLike:(item){this.changeLike(item)}})
// 子组件上进行接收
changeLike: (params: ReplyItem) void () {} // 接受一个无返回值的方法默认是空函数四 、 自定义构建函数 Builder 如果你不想在直接抽象组件 ArkUI 还提供了一种更轻量的UI元素复用机制 Builder可以将重复使用的 UI 元素抽象成一个方法在 build 方法里调用。称之为自定义构建函数 使用Builder 定义一个函数全局加function在组件里使用这个函数
// 定义 Builder
Builder
function getCellContent(leftTitle: string, rightValue: string) {Row() {Row() {Text(leftTitle)Text(rightValue)}.width(100%).justifyContent(FlexAlign.SpaceBetween).padding({left: 15,right: 15}).borderRadius(8).height(40).backgroundColor(Color.White)}.padding({left: 10,right: 10})}class CardClass {time: string location: string type: string
}
State formData: CardClass {time: 2023-12-12,location: 回龙观,type: 漏油}
// 在组件里使用
Column({ space: 10 }) {getCellContent(异常时间, this.formData.time)getCellContent(异常位置, this.formData.location)getCellContent(异常类型, this.formData.type)Button(修改数据).onClick(() {this.formData.location 望京})}.width(100%)全局自定义函数的问题 全局的自定义构建函数可以被整个应用获取下一代可用-当前4.0暂不支持不允许使用this和bind方法。 不可被其他文件引用 当我点击按钮时数据即使是响应式的当数据发生改变该函数不会自动渲染 因为我们刚刚传过去的是一个string类型 string 类型是一个基础类型按值传递不具备响应式更新的特点 解决方案改为按引用传递
// 完整代码
Entry
Component
struct BuilderCase {State formData: CardClass {time: 2023-12-12,location: 回龙观,type: 漏油}BuildergetCellContent($$: CellParams) {Row() {Row() {Text($$.leftTitle)Text($$.rightValue)}.width(100%).justifyContent(FlexAlign.SpaceBetween).padding({left: 15,right: 15}).borderRadius(8).height(40).backgroundColor(Color.White)}.padding({left: 10,right: 10})}build() {Row() {Column() {Column({ space: 10 }) {this.getCellContent({ leftTitle: 异常时间, rightValue: this.formData.time })this.getCellContent({ leftTitle: 异常位置, rightValue: this.formData.location })this.getCellContent({ leftTitle: 异常类型, rightValue: this.formData.type })}.width(100%)Button(修改数据).onClick(() {this.formData.location 望京})}.width(100%)}.height(100%).backgroundColor(#ccc)}
}class CardClass {time: string location: string type: string
}
class CellParams {leftTitle: string rightValue: string
}五、构建函数-BuilderParam 传递UI Vue里面有个叫做slot插槽的东西就是可以传入自定义的结构整体复用父组件的外观 ArkTS提供了一个叫做BuilderParam的修饰符你可以在组件中定义这样一个函数属性在使用组件时直接传入 使用BuilderParam 声明一个组件子组件要在想要显示插槽的地方来调用传入的方法在父组件里调用并传入父组件传递是一个函数这个函数也要使用 Builder 修饰
// 使用BuilderParam 声明组件
Component
struct HMCard {BuilderParamcontent: () voidbuild() {Column () {Text(卡片组件)Divider()Text(传入内容)if(this.content) {this.content() // 子组件要在想要显示插槽的地方来调用传入的方法}}}
}Entry
Component
struct BuilderParamCase {
// 声明渲染的函数组件BuildergetContent () {Row() {Text(插槽内容).fontColor(Color.Red)}}build() {Row() {Column() {HMCard({ content: this.getContent }) // 调用组件并传入要渲染的函数}.width(100%)}.height(100%)}
}
