当前位置：首页 > news >正文

按钮导航组件 | 纯血鸿蒙组件库AUI

news 来源：原创 2025/7/15 18:51:57

摘要：

按钮导航组件(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源码如下：

/** 按钮组件Model* text：导航文字* router：路由*/interface ButtonModel {text: stringrouter?: string
};export { ButtonModel };

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

/** Copyright (c) 2024 AIGCoder.com(AI极客)* Licensed under the Apache License, Version 2.0 (the "License");* you may not use this file except in compliance with the License.* You may obtain a copy of the License at**     http://www.apache.org/licenses/LICENSE-2.0** Unless required by applicable law or agreed to in writing, software* distributed under the License is distributed on an "AS IS" BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.* See the License for the specific language governing permissions and* limitations under the License.*//**调用示例一：极简调用A_ButtonNav({data: [{ text: 'AIGC', router: 'MainTabView' },{ text: '纯血鸿蒙', router: 'OrderDetail/2' }]})调用示例二：更多属性A_ButtonNav({data: [{ text: 'AIGC', router: 'MainTabView' },{ text: '纯血鸿蒙', router: 'OrderDetail/2' }],color: ColorConstants.DANGER,navTitle: 'AIGC低代码平台',navSubTitle: 'AIGC，纯血鸿蒙'})*/import { FloatConstants } from "../../constants/FloatConstants"
import { GirdConstants } from "../../constants/GirdConstants"
import { ButtonModel } from "../../models/ButtonModel"
import { A_Title_M } from "../text/A_Title_M"
import { A_SubTitle_L } from "../text/A_SubTitle_L"/*** 【按钮导航】* data：导航数据* color：按钮颜色* navTitle：导航标题* navSubTitle：导航子标题*/
@Component
export struct A_ButtonNav {@Prop data: Array<ButtonModel>@Prop color?: ResourceStr@Prop navTitle?: string = ''@Prop navSubTitle?: string = ''@StorageLink('pageInfo') pageInfo: NavPathStack = new NavPathStack()@StorageLink('deviceType') deviceType: string = GirdConstants.DEVICE_SMbuild() {Column({space:GirdConstants.TWELVE}) {A_Title_M({text:this.navTitle}).margin({top: this.deviceType === GirdConstants.DEVICE_LG ? FloatConstants.SPACE_TOP : FloatConstants.SPACE_L})A_SubTitle_L({text:this.navSubTitle})List({ space: GirdConstants.TWELVE }) {ForEach(this.data, (item: ButtonModel) => {ListItem() {Button(item.text).width(GirdConstants.FULL_PERCENT).backgroundColor(this.color).onClick(() => {if (item.router) {// 跳转到新页面const router = item.routerif (router.includes("/")) {this.pageInfo.pushPathByName(router.substring(0, router.indexOf("/")),router.substring(router.indexOf("/") + 1))} else {this.pageInfo.pushPathByName(router, null)}}})}}, (item: ButtonModel) => JSON.stringify(item))}.width(this.deviceType === GirdConstants.DEVICE_SM ? GirdConstants.FULL_PERCENT : GirdConstants.SEVENTY_PERCENT).height(GirdConstants.FULL_PERCENT)}.width(GirdConstants.FULL_PERCENT).height(GirdConstants.FULL_PERCENT).alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Start)}
}

按钮导航组件 | 纯血鸿蒙组件库AUI

摘要： 按钮导航组件(A_ButtonNav)：可设置导航数据(含文本及路由)，可设置按钮颜色、导航标题及导航子标题。一、组件调用方式 1.1.极简调用： 用 A_ButtonNav 调用“按钮导航组件”，只需要给属性 data （导…...

编程日记 2025/7/15 18:51:57

自适应主从复制模拟器的构建与研究

自适应主从复制模拟器的构建与研究摘要：本文旨在构建一个自适应主从复制模拟器，深入研究主从复制原理及优化方法。从研究者视角出发，详细阐述模拟器的设计、实现与实验过程，通过表格、图表及代码等辅助手段，逐步探讨如何在不同网络条件和负载下，自动调整主从复制参数和…...

编程日记 2025/7/15 18:49:11

015枚举之滑动窗口——算法备赛

滑动窗口最大子数组和题目描述给你一个整数数组 nums ，请你找出一个具有最大和的连续子数组（子数组最少包含一个元素），返回其最大和。原题链接思路分析见代码注解代码 int maxSubArray(vector<int>& num…...

编程日记 2025/7/15 18:51:06

【Dv3Admin】工具视图配置文件解析

在开发后台管理系统时，处理复杂的 CRUD 操作是常见的需求。Django Rest Framework（DRF）通过 ModelViewSet 提供了基础的增删改查功能，但在实际应用中，往往需要扩展更多的功能，如批量操作、权限控制、查询优化等。dvadmin/utils/viewset.py 模块通过继承并扩展 ModelViewS…...

编程日记 2025/7/15 18:50:08

在MyBatis Plus里处理LocalDateTime类型

在MyBatis Plus里处理LocalDateTime类型在MyBatis Plus里处理LocalDateTime类型时，你要确保数据库字段和Java实体类属性之间的类型映射是正确的。下面为你介绍处理这种情况的方法： 1. 数据库字段类型对应设置要保证数据库字段类型和LocalDateTime相…...

编程日记 2025/7/15 18:51:06

编程技能：字符串函数03，strncpy

专栏导航本节文章分别属于《Win32 学习笔记》和《MFC 学习笔记》两个专栏，故划分为两个专栏导航。读者可以自行选择前往哪个专栏。 （一）WIn32 专栏导航上一篇：编程技能：字符串函数02，strcpy 回到目录…...

编程日记 2025/7/15 18:50:07

edge设置位IE模式打开网页

打开Edge浏览器->在浏览器工具栏右键->自定义工具栏->外观->选择要在工具栏上显示的按钮->找到“Internet Explorer 模式”按钮->开启,将其添加到工具栏中...

编程日记 2025/7/15 18:49:11

代码随想录训练营第二十二天| 101.对称二叉树 100.相同的树

101.对称二叉树： 文档讲解：代码随想录|101.对称二叉树视频讲解：新学期要从学习二叉树开始！ | LeetCode：101. 对称二叉树_哔哩哔哩_bilibili 状态：已做出思路： 这道题目我初始做的时候想着使用…...

编程日记 2025/7/15 18:51:07

To manage Node.js versions on Windows, I recommend using nvm-windows (Node Version Manager for Windows). Here’s how we can handle this: First, let’s install nvm-windows. I’ll propose a command to check if it’s already installed: nvm versionGreat! I s…...

编程日记 2025/6/29 4:15:33

智能手表测试计划文档（软/硬件）

📄 智能手表测试计划文档（软/硬件） 项目名称：Aurora Watch S1 文档编号：AW-S1-QA-TP-001 编制日期：2025-xx-xx 版本：V1.0 编写人：xxx（测试主管） 一、测试目标…...

编程日记 2025/7/15 18:49:10

基于大模型的原发性醛固酮增多症全流程预测与诊疗方案研究

目录一、引言 1.1 研究背景与意义 1.2 国内外研究现状 1.3 研究目的与方法二、原发性醛固酮增多症概述 2.1 疾病定义与发病机制 2.2 临床表现与诊断标准 2.3 流行病学特征三、大模型预测原理与技术 3.1 大模型简介 3.2 预测原理与算法 3.3 数据收集与预处理四…...

编程日记 2025/7/15 18:50:08

spring中的@Lazy注解详解

一、核心功能与作用 Lazy 注解是 Spring 框架中用于延迟 Bean 初始化的核心工具，通过将 Bean 的创建推迟到首次使用时，优化资源利用和启动性能。其核心功能包括： 延迟初始化默认情况下，Spring 在容器启动时立即初始化所有单例 …...

编程日记 2025/6/29 1:35:27

Docker快速入门与应用

1. 什么是 Docker？ Docker 就像一个“魔法箱子”，可以把你开发的应用（代码、环境、配置）‌打包成一个标准化的容器‌，这个容器可以在任何支持 Docker 的系统上运行，无需担心环境差异导致的问题。 ‌类比‌…...

编程日记 2025/6/29 1:48:05

判断一个数是不是素数的最高效的算法

判断一个数是否是素数，有从简单到复杂多种方法。最高效的算法取决于输入规模（是几个亿以内的数，还是上百位的大整数），我会按实用场景分类讲解： ✅ 常规范围内（比如 ≤ 1e12）判断素数…...

编程日记 2025/7/10 0:58:20

《Head First 设计模式》第一章 - 笔记

本书是本人写的设计模式的笔记，写下核心要点，如果你掌握过设计模式，想快速阅读本书内容，这个笔记适合你阅读。如果你是新手，有 java 基础和 oo 设计原则基础，你适合跟我一样从零阅读本书。第一章策略模式…...

编程日记 2025/7/5 0:44:15

GPT系列：自然语言处理的演进与多模态的探索

GPT系列：自然语言处理的演进与多模态的探索 GPT系列的发展一、GPT-1 ：通过生成式的预训练改进自然语言GPT-1的动机做一个预训练模型的难点GPT-1的微调模式GPT-1的训练数据Bert 二、GPT-2语言模型是非监督的GPT-2的动机引入promptGPT-2模型架构的改变GPT-…...

编程日记 2025/7/2 22:48:58

Linux驱动：驱动编译流程了解

要求 1、开发板中的linux的zImage必须是自己编译的 2、内核源码树，其实就是一个经过了配置编译之后的内核源码。 3、nfs挂载的rootfs，主机ubuntu中必须搭建一个nfs服务器。内核源码树解压 tar -jxvf x210kernel.tar.bz2 编译 make x210ii_qt_defconfigmakeCan’t use ‘…...

编程日记 2025/6/29 4:26:43

【MySQL】数据库基础

目录 1.什么是数据库2.见一见数据库3.服务器、表、库之间的关系4.MySQL架构5.sql语句分类6.查看MySQL存储引擎6.1 查看存储引擎6.2 常见存储引擎对比 1.什么是数据库概念：数据库一般是指，在磁盘或者内存中存储的特定结构组织的数据 – 将来在磁盘上存储…...

编程日记 2025/6/29 1:48:31

1.1 文章简介

前因后果链行业需求 → 技能断层 → 课程设计响应 (高薪岗位要求数学基础) → (符号/公式理解困难) → (聚焦原理与应用) 行业驱动因素 • 前因：机器学习/AI等领域的高薪岗位激增，但数学能力成为主要门槛 • 关键矛盾：算法论文中的数学…...

编程日记 2025/6/29 3:35:10

laravel 中使用的pdf 扩展包 laravel-snappy(已解决中文乱码)

Centos7 安装 wkhtmltopdf 1、先查看系统是 32 位的还是 64 位的 uname -a2、通过 composer 安装 wkhtmltopdf 32位: $ composer require h4cc / wkhtmltopdf-i386 0.12.x $ composer require h4cc / wkhtmltoimage-i386 0.12.x 64位: $ composer require h4cc/wkhtmltopdf-…...

编程日记 2025/6/29 1:39:38

java反序列化commons-collections链6

cc链6，最好用的cc链，因为它不受jdk版本的限制和cc版本的限制，前半段很像urldns链，后半段是cc1链先来看一下它的利用链 Gadget chain:java.io.ObjectInputStream.readObject()java.util.HashSet.readObject()java.util.HashMap.p…...

编程日记 2025/6/29 1:35:36

WebSocket的原理及QT示例

一.WebSocket 介绍 1.概述 WebSocket 是一种在单个 TCP 连接上进行全双工通讯的协议，它在 2011 年被 IETF 定为标准 RFC 6455，并由 RFC7936 补充规范。与传统的 HTTP 协议不同，WebSocket 允许服务器和客户端之间进行实时、双向的数据传输&a…...

编程日记 2025/6/29 2:24:10

css 点击后改变样式

背景： 期望实现效果：鼠标点击之后，保持选中样式。实现思路：在css样式中，:active 是一种伪类，用于表示用户当前正在与被选定的元素进行交互。当用户点击或按住鼠标时，元素将被激活，此…...

编程日记 2025/6/29 2:35:21

AI 在模仿历史语言方面面临挑战：大型语言模型在生成历史风格文本时的困境与研究进展

概述在当今数字化时代，人工智能（AI）技术在诸多领域展现出了强大的能力，但在处理历史语言这一特定任务时，却遭遇了不小的挑战。美国和加拿大的研究人员通过合作发现，像 ChatGPT 这样的大型语言模型&#x…...

编程日记 2025/6/29 4:23:37

C++.Windows图形

Windows图形 1. 基础知识1.1 Windows图形编程基础1.2 GDI与GDI1.3 窗口消息处理2.1 注册窗口类2.2 创建窗口2.3 显示窗口3.1 创建按钮3.2 按钮消息处理4.1 设置窗口透明度4.2 透明窗口示例5.1 使用区域创建异形窗口5.2 异形窗口示例6.1 GDI抗锯齿设置6.2 抗锯齿绘图示例7.1 Dir…...

编程日记 2025/6/29 2:33:42

【Vue3】使用vite创建Vue3工程、Vue3基本语法讲解

一、什么是Vite Vite是新一代前端构建工具，官网地址：Vite中文网，vite的优势如下： 轻量快速的热重载（HMR），能实现极速的服务启动对TypeScript、JSX、CSS等支持开箱即用真正的按需编译&#xff…...

编程日记 2025/7/1 4:43:12

专题二：二叉树的深度优先搜索

以leetcode2331题为例题目分析： 以第一个示例为例算法原理分析： 从宏观角度，也就是我的算法之回溯的第一篇我们发现我们在研究示例的时候，必须从下往上推也就是我在研究一个结点是true还是false的时候，必须…...

编程日记 2025/6/29 1:39:41

Termius ssh连接服务器 vim打开的文件无法复制问题

你的问题是： • 在 Termius (macOS) SSH 连接到 VMware Ubuntu，使用 vim 打开 .cpp 文件时，可以复制文本； • 但在 Windows 10 上 SSH 到 VMware 的 Red Hat 6.4 时，复制操作无效。 ⸻ 🎯 初步分析复制…...

编程日记 2025/6/29 5:01:57

搭建大数据学习的平台

一、基础环境准备 1. 硬件配置物理机：建议 16GB 内存以上，500GB 硬盘，多核 CPU虚拟机：至少 3 台（1 主 2 从），每台 4GB 内存，50GB 硬盘 2. 操作系统 Ubuntu 20.04 LTS 或 CentOS…...

编程日记 2025/7/14 8:02:18

Matlab 模糊控制节水洗衣机模型

1、内容简介 Matlab 232-模糊控制节水洗衣机模型可以交流、咨询、答疑 2、内容说明略 3、仿真分析略 4、参考论文略...

编程日记 2025/7/8 12:46:15

如何找正常运行虚拟机

1.新建虚拟机。Linux centos7，给虚拟机改个名字不要放在c盘 2.安装操作系统。cd/dvd->2009.iso 启动虚拟机...

编程日记 2025/7/12 10:40:33

python二手书交易管理系统

目录技术栈介绍具体实现截图系统设计研究方法：设计步骤设计流程核心代码部分展示研究方法详细视频演示试验方案论文大纲源码获取/详细视频演示技术栈介绍 Django-SpringBoot-php-Node.js-flask 本课题的研究方法和研究步骤基本合理，难度适中&#xf…...

编程日记 2025/7/7 4:48:25

使用本地部署的 LLaMA 3 模型进行中文对话生成

以下程序调用本地部署的 LLaMA3 模型进行多轮对话生成，通过 Hugging Face Transformers API 加载、预处理、生成并输出最终回答。程序用的是 Chat 模型格式（如 LLaMA3 Instruct 模型），遵循 ChatML 模板，并使用 apply…...

编程日记 2025/7/1 3:09:00

C++编程练习，认识面向对象权限，如何进行封装

#include <iostream> #include <string> using namespace std; /* 银行的账户是一个模板，是一个类，有存款人信息和账户额度，而具体的存款人视为一个对象， 一个对象不能私自修改账户额度，需要通过一个操作流…...

编程日记 2025/6/29 2:24:00

A Survey of Learning from Rewards：从训练到应用的全面剖析

A Survey of Learning from Rewards：从训练到应用的全面剖析你知道大语言模型（LLMs）如何通过奖励学习变得更智能吗？这篇论文将带你深入探索。从克服预训练局限的新范式，到训练、推理各阶段的策略，再到广泛…...

编程日记 2025/6/29 3:21:48

电脑端音乐播放器推荐：提升你的听歌体验！

在快节奏的职场环境中，许多上班族都喜欢用音乐为工作时光增添色彩。今天要分享的这款音乐工具，或许能为你的办公时光带来意想不到的惊喜。一、软件介绍-澎湃澎湃音乐看似是个普通的播放器，实则藏着强大的资源整合能力。左侧功能栏清晰陈列着…...

编程日记 2025/6/29 1:35:37

小刚说C语言刷题—1149 - 回文数个数

1.题目描述一个正整数，正读和反读都相同的数为回文数。例如 22， 131， 2442 ， 37073， 66，…… 所有 11位数都是回文数。给出一个正整数 n （ 1≤n≤10000 ），求出 1,2…...

编程日记 2025/6/29 4:45:14

基于SpringBoot的博客系统测试报告

一、编写目的本报告为博客系统测试报告，本项目模拟了csdn，实现了包括了用户登录，发布博客文章，查看博客等功能。二、项目背景博客系统采用前后端分离的方法来实现，同时使用了数据库来存储相关的数据&#xff0c…...

编程日记 2025/6/29 4:17:34

Koa知识框架

一、核心概念 1. 基本特点由 Express 原班人马开发的下一代 Node.js Web 框架基于中间件的洋葱圈模型轻量级核心（仅约 600 行代码） 完全使用 async/await 异步流程控制没有内置任何中间件，高度可定制 2. 核心对象 Application (Ko…...

编程日记 2025/6/29 1:44:07

React Native踩坑实录：解决NativeBase Radio组件在Android上的兼容性问题

React Native踩坑实录：解决NativeBase Radio组件在Android上的兼容性问题问题背景在最近的React Native项目开发中，我们的应用在iOS设备上运行良好，但当部署到Android设备时，进入语言设置和隐私设置页面后应用崩溃。我们遇到了…...

编程日记 2025/7/13 11:19:26

RCE联系

过滤绕过空格 ● 进制绕过题目练习数字rce 使用$0执行bash，<<<将后面的字符串传递给左边的命令。例如： <?php highlight_file(__FILE__); function waf($cmd) { $whiteList [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, \\, \, $, <]; $cmd_ch…...

编程日记 2025/7/3 20:34:48

区块链大纲笔记

中心化出现的原因是由于网络的形成（不然就孤立了，这显然不符合现实，如，社会，计算机网路），接着由于网络中结点能力一般不对等同时为了便于管理等一系列问题，导致中心化网络的出现。&a…...

编程日记 2025/6/29 4:06:14

SQL：JOIN 进阶

目录 JOIN 是什么？ 🔹OUTER JOIN（外连接） 外连接的分类外连接与内连接的区别 🔹USING 子句语法结构和 ON 的对比 📘USING 的内部逻辑 🧩 多个字段的 USING USING 的 SELECT 特性&a…...

编程日记 2025/6/29 4:52:03

SATA—Link层状态机

一、概述 Link层的状态机大致可以分为五类： 链路层空闲状态机通信异常处理状态机链路层发送状态机链路层接收状态机链路层电源管理下的状态机二、链路层空闲状态机链路层空闲状态机共包含两个状态L_IDLE、L_SyncEscape，每个状态下的处理机制与条状…...

编程日记 2025/6/29 4:17:33

12.2.2 allocator类

allocator类将分配内存空间、调用构造函数、调用析构函数、释放内存空间这4部分操作分开，全部交给程序员来执行，不像new和delete #include <iostream> #include <string>int main() {const int n 10;std::allocator<std::string> al…...

编程日记 2025/7/10 16:59:42

Qwen：Qwen3，R1 在 Text2SQL 效果评估

【对比模型】 Qwen3 235B-A22B（2350亿总参数，220亿激活参数），32B，30B-A3B；QwQ 32B（推理模型）DeepSeek-R1 671B（满血版）（推理模型） 1&a…...

编程日记 2025/7/9 15:25:40

Egg.js知识框架

一、Egg.js 核心概念 1. Egg.js 简介基于 Koa 的企业级 Node.js 框架（阿里开源） 约定优于配置（Convention over Configuration） 插件化架构，内置多进程管理、日志、安全等能力适合中大型企业应用，提供…...

编程日记 2025/6/29 3:21:26

latex控制表格宽度，不要超出页面

字体控制控制表格的字体，一般使用 footnotesize ，neurips 使用的就是这个大小列宽距控制默认列宽距是 6pt ，可以人工调节成为 5pt，不影响字体，比较不影响可读性 % 对于 table* 环境, [htbp] 通常比 [h] 或 [h!]…...

编程日记 2025/6/29 3:40:03

Linux进程管理

程序、进程、服务程序 program 安装包，未运行的代码，APP 存放在磁盘上进程 process 已运行程序、命令、服务，一个程序可以运行多个进程、父进程启动子进程运行在内存中服务 service 一直运行的进程，也叫做守护进程&…...

编程日记 2025/7/7 17:05:06

[springboot]SSM日期数据转换易见问题

日期数据的形式有多种，如2025-05-12 14:46:50、2025.05.12 14:46，可以没有年只有月日...等等。在SSM项目中，前后端传递日期数据时往往需要统一格式，不然会报数据类型转换异常。在controller层中用实体类实例对象接收前端服务器传…...

编程日记 2025/6/29 8:39:56

一、组件调用方式

1.1.极简调用：

2.更多属性

二、在线排版

三、源码解析

相关文章：