qidao123.com技术社区-IT企服评测·应用市场

标题: 按钮导航组件 | 纯血鸿蒙组件库AUI [打印本页]

---

作者: 三尺非寒    时间: 5 天前
标题: 按钮导航组件 | 纯血鸿蒙组件库AUI
择要：
  按钮导航组件(A_ButtonNav)：可设置导航数据(含文本及路由)，可设置按钮颜色、导航标题及导航子标题。
  

一、组件调用方式

1.1.极简调用：

用 A_ButtonNav 调用“按钮导航组件”，只须要给属性 data （导航数据）赋值即可。其中每项数据须要配置按钮的文本和跳转的路由，如下图所示：

本地模拟器运行结果如下：

2.更多属性

可设置按钮的颜色（color），在颜色常量中有一整套符合鸿蒙官方计划标准的“适配手机、平板、智慧屏、穿戴设备、车机”和“深色模式/浅色模式”的颜色资源定义，还支持按原色分组的 Material Design 调色板。可以根据须要设置导航标题（navTitle）和导航子标题（navSubTitle）。如下图所示：

Material 色彩表可参考：https://vuetifyjs.com/zh-Hans/styles/colors/#sass-989c82725305
在本地模拟器上浅色模式和深色模式下，运行结果如下：

二、在线排版

点击“App引导页”的“计划页面”按钮，进入页面计划器：

从组件库将“按钮导航组件”拖拽到页面左上角，注意，按钮导航组件是App引导页专用组件，其它类型页面无法使用该组件。如下图所示：

初始化数据中路由是无效页面，须要点击“配置数据”按钮，进入配置数据设置面板给每个按钮绑定真实的页面，如下图所示：

可根据须要设置按钮的颜色、导航标题和导航子标题，修改后记得点击“保存设置”按钮，如下图所示：

侧栏菜单中，选择“纯血鸿蒙”，然后点击页面右上角的“代码邪术”图标，一秒生成生产级纯血鸿蒙项目工程，然后选择“引导页”(GuideView.ets)，查看根据配置生成的鸿蒙代码。如下图所示：

三、源码解析

按钮导航组件是一个比较简朴的组件，它主要有四个属性：导航数据（data）、按钮颜色（color）、导航标题（navTitle）和导航子标题（navSubTitle）。如下图所示：

导航数据 data 是一个数组，接受 ButtonModel 的数据布局，用于设置按钮的文本（text）和页面跳转的路由（router）：

在按钮导航组件的源码中，A_Title_M（中号标题组件）展示导航标题，A_SubTitle_L（大号子标题组件）展示导航子标题，Button组件表现按钮，并通过onClick 点击事件实现路由页面跳转，如下图所示：

ButtonModel源码如下：

1. /*
2. * 按钮组件Model
3. * text：导航文字
4. * router：路由
5. */
7. interface ButtonModel {
8.   text: string
9.   router?: string
10. };
12. export { ButtonModel };

复制代码

按钮导航组件的源码如下：

1. /*
2. * Copyright (c) 2024 AIGCoder.com(AI极客)
3. * Licensed under the Apache License, Version 2.0 (the "License");
4. * you may not use this file except in compliance with the License.
5. * You may obtain a copy of the License at
6. *
7. *     http://www.apache.org/licenses/LICENSE-2.0
8. *
9. * Unless required by applicable law or agreed to in writing, software
10. * distributed under the License is distributed on an "AS IS" BASIS,
11. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12. * See the License for the specific language governing permissions and
13. * limitations under the License.
14. */
16. /**
17. 调用示例一：极简调用
18. A_ButtonNav({
19.    data: [
20.      { text: 'AIGC', router: 'MainTabView' },
21.      { text: '纯血鸿蒙', router: 'OrderDetail/2' }
22.    ]
23. })
25. 调用示例二：更多属性
26. A_ButtonNav({
27.    data: [
28.      { text: 'AIGC', router: 'MainTabView' },
29.      { text: '纯血鸿蒙', router: 'OrderDetail/2' }
30.    ],
31.    color: ColorConstants.DANGER,
32.    navTitle: 'AIGC低代码平台',
33.    navSubTitle: 'AIGC，纯血鸿蒙'
34. })
35. */
37. import { FloatConstants } from "../../constants/FloatConstants"
38. import { GirdConstants } from "../../constants/GirdConstants"
39. import { ButtonModel } from "../../models/ButtonModel"
40. import { A_Title_M } from "../text/A_Title_M"
41. import { A_SubTitle_L } from "../text/A_SubTitle_L"
43. /**
44. * 【按钮导航】
45. * data：导航数据
46. * color：按钮颜色
47. * navTitle：导航标题
48. * navSubTitle：导航子标题
49. */
50. @Component
51. export struct A_ButtonNav {
52.   @Prop data: Array<ButtonModel>
53.   @Prop color?: ResourceStr
54.   @Prop navTitle?: string = ''
55.   @Prop navSubTitle?: string = ''
57.   @StorageLink('pageInfo') pageInfo: NavPathStack = new NavPathStack()
58.   @StorageLink('deviceType') deviceType: string = GirdConstants.DEVICE_SM
60.   build() {
61.     Column({space:GirdConstants.TWELVE}) {
62.       A_Title_M({text:this.navTitle})
63.         .margin({
64.           top: this.deviceType === GirdConstants.DEVICE_LG ? FloatConstants.SPACE_TOP : FloatConstants.SPACE_L
65.         })
67.       A_SubTitle_L({text:this.navSubTitle})
69.       List({ space: GirdConstants.TWELVE }) {
70.         ForEach(this.data, (item: ButtonModel) => {
71.           ListItem() {
72.             Button(item.text)
73.               .width(GirdConstants.FULL_PERCENT)
74.               .backgroundColor(this.color)
75.               .onClick(() => {
76.                 if (item.router) {
77.                   // 跳转到新页面
78.                   const router = item.router
79.                   if (router.includes("/")) {
80.                     this.pageInfo.pushPathByName(router.substring(0, router.indexOf("/")),
81.                       router.substring(router.indexOf("/") + 1))
82.                   } else {
83.                     this.pageInfo.pushPathByName(router, null)
84.                   }
85.                 }
86.               })
87.           }
88.         }, (item: ButtonModel) => JSON.stringify(item))
89.       }
90.       .width(this.deviceType === GirdConstants.DEVICE_SM ? GirdConstants.FULL_PERCENT : GirdConstants.SEVENTY_PERCENT)
91.       .height(GirdConstants.FULL_PERCENT)
92.     }
93.     .width(GirdConstants.FULL_PERCENT)
94.     .height(GirdConstants.FULL_PERCENT)
95.     .alignItems(HorizontalAlign.Center)
96.     .justifyContent(FlexAlign.Start)
97.   }
98. }

复制代码

---

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 qidao123.com技术社区-IT企服评测·应用市场 (https://dis.qidao123.com/)

Powered by Discuz! X3.4