# API-11 **Repository Path**: cuiwenle006/api-11 ## Basic Information - **Project Name**: API-11 - **Description**: API-11 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2024-01-24 - **Last Updated**: 2026-03-10 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README 以后就看这个就行了 有案例UI演示动画 https://gitee.com/harmonyos-cases/cases/tree/master/ 黑马--苏杰豪 语雀文档 https://www.yuque.com/megasu https://my.feishu.cn/wiki/N2N9woFYhiC6YDkSmwpc3UR3nnh https://my.feishu.cn/wiki/N2N9woFYhiC6YDkSmwpc3UR3nnh?from=from_copylink 黑马学生 https://gitee.com/cbnh/projects 黑马 杨岭 飞书文档 https://my.feishu.cn/wiki/R8S3wddgBiBzV9kLf1gcD6RvnDc https://gitee.com/itcast_panpu/projects 黑马杨岭的码云仓库地址 B站---薄荷世界心----代码 https://github.com/YangMr/HarmonyOS_Project.git 鸿蒙项目难点 https://github.com/YangMr/YXSD.git 鸿蒙养老项目 https://github.com/YangMr/weChat.git 鸿蒙微信项目 https://github.com/YangMr/hm-course.git 鸿蒙上课代码 https://github.com/YangMr/ks.git 鸿蒙考试 这2个页面使用自定义构建函数传递参数和传递UI布局 BuilderPage BuilderParamPage //设置页面沉浸式 .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]) // 设置键盘避让模式为压缩模式 //https://developer.huawei.com/consumer/cn/doc/search?type=all&val=键盘避让怎么设置 好像不生效 windowStage.getMainWindowSync().getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE); if (err.code) { // 错误处理 return; } 鸿蒙优秀的三方项目 感谢支持！ https://gitcode.com/qq511029414/HarmonyOS_Study https://gitee.com/harmonyos-cases/cases/tree/master/#172限制高度底部弹窗20250114更新 就是这个地址 https://gitee.com/harmonyos-cases/cases#https://gitee.com/link?target=https%3A%2F%2Fappgallery.huawei.com%2Fapp%2Fdetail%3Fid%3Dcom.north.cases 水波纹 https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/waterripples/README.md https://mp.weixin.qq.com/s/x65n9mliP0MMoVeTlFy8sA 优秀的三方开源库,插件: https://ohpm.openharmony.cn/#/cn/home 鸿蒙三方私仓开源库 https://ohpm.openharmony.cn/#/cn/home 优秀的三方开源库,插件: https://gitee.com/openharmony-tpc/tpc_resource#https://gitee.com/openharmony-sig/PullToRefresh 官方文档--代码示例: https://gitee.com/harmonyos_samples/hmosworld 鸿蒙世界 鸿蒙学习 https://mayw-teaching.feishu.cn/wiki/YbebwHfUuiG3ijkGTFYcD00unAT 黑马程序员代码地址 https://gitee.com/huyi612/harmonyos-lessons/tree/master 好用的三方库 https://gitee.com/openharmony-tpc/tpc_resource#https://gitee.com/openharmony-sig/PullToRefresh https://ohpm.openharmony.cn/#/cn/detail/@abner%2Frefresh https://gitee.com/harmonyos-cases/cases/tree/master/CommonAppDevelopment/feature/imageviewer https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/componentstack/README.md 安装方法： ohpm install @ohos/subsampling-scale-image-view 下载地址： https://gitee.com/openharmony-sig/subsampling-scale-image-view_bak https://gitee.com/openharmony-sig/ImageViewZoom?_from=gitee_search NNNN Tabs 列表 点击的时候有动画的效果 @State allListString: string[] = ["北京", "上海", "广州", "深圳", "郑州", "西安", "武汉", "南京", "洛阳", "杭州"] //要想让滑动,Scroll里面的子容器组件高度不能写100% 处理滑动布局 Scroll 里面只能有1个子容器,且子容器不能设置高度,否则就不能滑动, 默认子容器是居中的,要想让子容器里面的内容居上,需要给Scroll添加属性方法 .align(Alignment.Top) 注意要加在Scroll身上 可以参考 TestCuiScroll 和 TestMyPay `//扩展方法 Image($r("app.media.icon")) @Extend(Image) function exImage() { .width("100") .height("100") .objectFit(ImageFit.Contain) }` `@Extend(Text) function exText() { .fontSize(30) .fontWeight(FontWeight.Bold) .fontStyle(FontStyle.Italic) .fontColor("#f00") }` `//跳转传参,以及获取参数 Button("点击去下个页面").onClick(() => { router.pushUrl({ url: "pages/Page1", params: { name: “张三”, age: 23, } }) })` `let name = router.getParams()["name"] let age = router.getParams()["age"] ` //这样就是安卓里面的抽取方法 传递的是时差,这里用到是形参...但是必须用 this.isOK 不知道为什么 //这个是类似于安卓里面的抽取方法,里面是形参,上面是传的实参 ```@Builder function itemAdapter(con: string, iconOK: Resource, iconDe: Resource, isOk: boolean) { if (this.isOk) { Image(iconOK).exImage() } else { Image(iconDe).exImage() } Text(con).fontSize(20).fontColor("#000").fontWeight(FontWeight.Bold).decoration({ type: this.isOk ? TextDecorationType.LineThrough : TextDecorationType.None, color: this.isOk ? "#f00" : "#00f", }) } @Extend(Image) function exImage() { .width(20) .height(20) .margin(20) }``` //自定义通用组件样式的话 用 @Styles 自定义专用组件样式,用 @Extend (扩展) 可以参考 Page2.ets 文件 @Entry @Component struct Page2 { @State message: string = 'Hello World' build() { Row() { Column({ space: 20 }) { Text("1").exText(20) Text("---2").exText(30, Color.Green) Text("=======3").exText(30) Text("4444444444").exText(40, "#f00") Text("看看文本样式").exText(40).fontStyle(FontStyle.Italic) Text("测试可空").exText() Image($r("app.media.ic_ok")).commStyle() Button({ type: ButtonType.Capsule }).commStyle().backgroundColor("#f00") Text("").commStyle().backgroundColor("#00f") Text("帝心老师的课程") .commStyle() //TODO 通用样式 .exText(40) //TODO 组件设置的样式 .backgroundColor("#0f0").width("70%").height(100) } .width('100%') } .height('100%') } } //固定组件样式可以传递,建议形参上标记上是否可空 @Extend(Text) function exText(fs?: number, co?: Color | string) { .fontSize(fs) .fontColor(co) .fontStyle(FontStyle.Normal) .textAlign(TextAlign.Start) .height(40) .backgroundColor("#0f0") .width("100%") } //通用组件样式,不能传递参数 @Styles function commStyle() { .width("100") .height(50) .backgroundColor("#eee") } //创建实体类的写法 /** * Author:HarmonyOS 4.0 * Date:2023/12/23 * Describe: 实体类要这样写 export default class HobbyBean { xxxx} * 注意不能用 new 出来类名 */ export default class HobbyBean { private name?: string private isCheck?: boolean constructor(name?: string, isCheck?: boolean) { this.name = name this.isCheck = isCheck } } // export default new HoxbbyBean() //自定义一个弹框 CustomDialogWidget 要用@CustomDialog修饰 里面必须有个控制器,否则编译会报错 private customDialogController: CustomDialogController //把自定义自己里面的值通过回调方法给回调到外面 subText = (info: string) => { } //具体在 MyDialogInputView 里面有使用的案例 MyDialogInputView({ placeholder: "家庭地址", imageHolder: $r("app.media.test3"), subInfo: $subString, subText: (address: string) => { this.inPut3Address = address } }) //===================== [](https://mayw-teaching.feishu.cn/docx/H3qlddyh6oXEpUxBqp9cjCwPnic) https://mayw-teaching.feishu.cn/docx/H3qlddyh6oXEpUxBqp9cjCwPnic !!!!!!! TODO 重点 !!!!!!! TODO 重点 !!!!!!! TODO 重点 父子组件需要数据同步和绑定的处理 单向数据同步:父-----单向---->>>子 用 @State 和 @Prop 双向数据同步:父<<<--双向---->>>子 用 @State 和 @Link 跨组件数据双向同步 @Provide装饰器和@Consume装饰器：与后代组件双向同步 @State stateImage0: Resource = $rawfile("stateImage0.png") @State stateImage1: Resource = $rawfile("stateImage1.png") @State stateImage2: Resource = $rawfile("stateImage2.png") - @State：@State装饰的变量拥有其所属组件的状态，可以作为其子组件单向和双向同步的数据源。当其数值改变时，会引起相关组件的渲染刷新。 - @Prop：@Prop装饰的变量可以和父组件建立单向同步关系，@Prop装饰的变量是可变的，但修改不会同步回父组件。 - @Link：@Link装饰的变量和父组件构建双向同步关系的状态变量，父组件会接受来自@Link装饰的变量的修改的同步，父组件的更新也会同步给@Link装饰的变量。 - @Provide/@Consume：@Provide/@Consume装饰的变量用于跨组件层级（多层组件）同步状态变量，可以不需要通过参数命名机制传递，通过alias（别名）或者属性名绑定。 - @Observed：@Observed装饰class，需要观察多层嵌套场景的class需要被@Observed装饰。单独使用@Observed没有任何作用，需要和@ObjectLink、@Prop连用。 - @ObjectLink：@ObjectLink装饰的变量接收@Observed装饰的class的实例，应用于观察多层嵌套场景，和父组件的数据源构建双向同步。 @Provide装饰器和@Consume装饰器：与后代组件双向同步 @Provide和@Consume，应用于与后代组件的双向数据同步，应用于状态数据在多个层级之间传递的场景。不同于上文提到的父子组件之间通过命名参数机制传递，@Provide和@Consume摆脱参数传递机制的束缚，实现跨层级传递。 其中@Provide装饰的变量是在祖先节点中，可以理解为被“提供”给后代的状态变量。@Consume装饰的变量是在后代组件中，去“消费（绑定）”祖先节点提供的变量。 @Provide/@Consume装饰的状态变量有以下特性： - @Provide装饰的状态变量自动对其所有后代组件可用，即该变量被“provide”给他的后代组件。由此可见，@Provide的方便之处在于，开发者不需要多次在组件之间传递变量。 - 后代通过使用@Consume去获取@Provide提供的变量，建立在@Provide和@Consume之间的双向数据同步，与@State/@Link不同的是，前者可以在多层级的父子组件之间传递。 - @Provide和@Consume可以通过相同的变量名或者相同的变量别名绑定，变量类型必须相同。 @Provide和@Consume通过相同的变量名或者相同的变量别名绑定时，@Provide修饰的变量和@Consume修饰的变量是一对多的关系。不允许在同一个自定义组件内，包括其子组件中声明多个同名或者同别名的@Provide装饰的变量。 //路由的跳转 可以传递页面 传递参数 设置启动模式 回调页面跳转的错误状态码 replaceUrl 这个是跳转并替换页面 router.pushUrl({ url: "myDialog2/pages/MyInfoPage", params: { name: "张三", age: 23 }, }, router.RouterMode.Standard, (err) => { if (err) { Prompt.showToast({ message: err.message + err.code + err.name }) } }) //输入框 设置点击时候聚焦的背景颜色,可以先设置backgroundColor为透明色 TextInput({ placeholder: this.placeholder }) .backgroundColor(Color.Transparent) .placeholderColor("#999") .caretColor("#f00") .margin({ left: 10, right: 10 }) .layoutWeight(1)//.backgroundColor(Color.Red) .onChange((value: string) => { let info = value.toString() this.subInfo = info this.subText(info) }) .stateStyles({ pressed: { .backgroundColor("#fff") } }) //鸿蒙自定义方形输入框(仿滴滴)短信验证码 InputCodePage https://blog.csdn.net/u011345545/article/details/135036872 import web_webview from '@ohos.web.webview' controller: web_webview.WebviewController = new web_webview.WebviewController() Web({ src: "https://www.baidu.com", controller: this.controller }) .domStorageAccess(true) //通用的背景色,这样有阴影效果 @Styles function card2() { .width('95%') .padding(20) .backgroundColor(Color.White) .borderRadius(15) .shadow({ radius: 6, color: '#1F000000', offsetX: 2, offsetY: 4 }) }