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

鸿蒙开发-UI-组件导航-Navigation

鸿蒙开发-UI-组件

鸿蒙开发-UI-组件2

鸿蒙开发-UI-组件3

鸿蒙开发-UI-气泡/菜单

鸿蒙开发-UI-页面路由

文章目录

目录

一、基本概念

二、页面显示模式

1.自适应模式

2.单页面模式

3.分栏模式

三、标题栏模式

1.Mini模式

2.Full模式

四、菜单栏

五、工具栏

六、案例

总结


前言

上文详细学习了鸿蒙开发UI页面跳转的相关知识,学习页面路由router基本概念,使用方法,页面路由两种跳转模式和两种实例模式的区别以及不同跳转模式和实例模式组合下的使用场景,学习了页面跳转后普通返回和带弹窗的返回使用方法,学习了页面带数据的跳转方式以及目标页面接收数据的方法,本文将学习鸿蒙UI开发组件导航Navigation

一、基本概念

二、页面显示模式

Navigation组件通过mode属性设置页面的显示模式

1.自适应模式

Navigation组件默认为自适应模式,此时mode属性为NavigationMode.Auto。自适应模式下,当设备宽度大于520vp时,Navigation组件采用分栏模式,反之采用单页面模式

Navigation() {...
}
.mode(NavigationMode.Auto)

2.单页面模式

将mode属性设置为NavigationMode.Stack,Navigation组件即可设置为单页面显示模式

单页面布局如下图所示

3.分栏模式

将mode属性设置为NavigationMode.Split,Navigation组件即可设置为分栏显示模式

分栏布局如下图所示

三、标题栏模式

标题栏在界面顶部,用于呈现界面名称和操作入口,Navigation组件通过titleMode属性设置标题栏模式

1.Mini模式

普通型标题栏,用于一级页面不需要突出标题的场景

Navigation() {...
}
.titleMode(NavigationTitleMode.Mini)

2.Full模式

强调型标题栏,用于一级页面需要突出标题的场景

Navigation() {...
}
.titleMode(NavigationTitleMode.Full)

四、菜单栏

菜单栏位于Navigation组件的右上角,开发者可以通过menus属性进行设置。menus支持Array<NavigationMenuItem>和CustomBuilder两种参数类型。使用Array<NavigationMenuItem>类型时,竖屏最多支持显示3个图标,横屏最多支持显示5个图标,多余的图标会被放入自动生成的更多图标

设置了3个图标的菜单栏

Navigation() {...
}
.menus([{value: "", icon: "./image/ic_public_search.svg", action: ()=>{}},{value: "", icon: "./image/ic_public_add.svg", action: ()=>{}},{value: "", icon: "./image/ic_public_add.svg", action: ()=>{}}])

设置了4个图标的菜单栏

Navigation() {...
}
.menus([{value: "", icon: "./image/ic_public_search.svg", action: ()=>{}},{value: "", icon: "./image/ic_public_add.svg", action: ()=>{}},{value: "", icon: "./image/ic_public_add.svg", action: ()=>{}},{value: "", icon: "./image/ic_public_add.svg", action: ()=>{}}])

五、工具栏

工具栏位于Navigation组件的底部,开发者可以通过toolBar属性进行设置

Navigation() {...
}
.toolBar({items:[{value: "func", icon: "./image/ic_public_highlights.svg", action: ()=>{}},{value: "func", icon: "./image/ic_public_highlights.svg", action: ()=>{}},{value: "func", icon: "./image/ic_public_highlights.svg", action: ()=>{}}]})

六、案例

代码示例

@Entry
@Component
struct PageNavi {private arr: number[] = [1, 2, 3];build() {Column() {Navigation() {TextInput({ placeholder: 'search...' }).width("90%").height(40).backgroundColor('#FFFFFF')List({ space: 12 }) {ForEach(this.arr, (item) => {ListItem() {NavRouter() {Text("NavRouter" + item).width("100%").height(72).backgroundColor('#FFFFFF').borderRadius(24).fontSize(16).fontWeight(500).textAlign(TextAlign.Center)NavDestination() {Text("NavDestinationContent" + item)}.title("NavDestinationTitle" + item).margin({bottom: 20})}}}, item => item)}.width("90%").margin({ top: 12 })}.title("主标题").titleMode(NavigationTitleMode.Mini).mode(NavigationMode.Auto).menus([{value: "",  icon: "pages/image/icon.png", action: ()=> {}},{value: "",  icon: "pages/image/icon.png", action: ()=> {}},{value: "",  icon: "pages/image/icon.png", action: ()=> {}},{value: "",  icon: "pages/image/icon.png", action: ()=> {}},]).toolBar({items: [{value: "func",  icon: "pages/image/icon.png",action: ()=> {}},{value: "func",  icon: "pages/image/icon.png",action: ()=> {}},{value: "func",  icon: "pages/image/icon.png",action: ()=> {}}]})}.height('100%').width('100%').backgroundColor('#F1F3F5')}
}

页面渲染


总结

相关文章:

鸿蒙开发-UI-组件导航-Navigation

鸿蒙开发-UI-组件 鸿蒙开发-UI-组件2 鸿蒙开发-UI-组件3 鸿蒙开发-UI-气泡/菜单 鸿蒙开发-UI-页面路由 文章目录 目录 一、基本概念 二、页面显示模式 1.自适应模式 2.单页面模式 3.分栏模式 三、标题栏模式 1.Mini模式 2.Full模式 四、菜单栏 五、工具栏 六、案例 …...

Codeforces Round 922 (Div. 2)(A~D)补题

A题考虑贪心&#xff0c;要使使用的砖头越多&#xff0c;每块转的k应尽可能小&#xff0c;最小取2&#xff0c;最后可能多出来&#xff0c;多出来的就是最后一块k3&#xff0c;我们一行内用到的砖头就是 m 2 \frac{m}{2} 2m​下取整&#xff0c;然后乘以行数就是答案。 #inclu…...

Seata下载与配置、启动

目录 Seata下载Seata配置启动Seata Seata下载 首先&#xff0c;我们需要知道我们要使用哪个版本的seata&#xff0c;这就要查看spring-cloud-alibaba版本说明&#xff0c;找到我们对应的seata。 spring-cloud-alibaba版本说明: 地址链接 下面是部分版本说明&#xff1a; s…...

什么是TCP三次握手、四次挥手?

1、三次握手 你(客户端)给一个朋友(服务器)打电话&#xff0c;告诉他你想开始对话。这就像是发送一个SYN(同步序列编号)信号&#xff0c;表示你想开始建立连接。(client向server发送syn&#xff0c;seqx&#xff0c;此时client验证client发送能力正常。client置为SYN SENT状态)…...

C++程序在开机自启和定时器执行时遇到的问题和解决方法

遇到的错误如下&#xff1a; Camera is created.load vfvlog.[dll/so] failed for dll[/vfvlog.so] unexistedLoadDbgConfig, LoadFile fail, err:-3, errno: No such file or directoryqt.qpa.xcb: could not connect to displayqt.qpa.plugin: Could not load the Qt platfo…...

R17 extended DRX(eDRX)

根据工业无线传感器的要求,电池至少可持续使用数年。 在NB-IoT和LTE eMTC中,也有类似的要求。 为了满足极长电池寿命的要求,NB-IoT和LTE eMTC在Release 13中为RRC IDLE UE引入了扩展DRX,在Release 16中为RRC INACTIVE UE引入了eDRX,上面是LTE 引入eDRX的背景。 一 概述 到…...

Debezium发布历史102

原文地址&#xff1a; https://debezium.io/blog/2021/02/24/debezium-1-5-beta1-released/ 欢迎关注留言&#xff0c;我是收集整理小能手&#xff0c;工具翻译&#xff0c;仅供参考&#xff0c;笔芯笔芯. Debezium 1.5.0.Beta1 发布 2021 年 2 月 24 日 作者&#xff1a; Gu…...

探索自然语言处理在改善搜索引擎、语音助手和机器翻译中的应用

文章目录 每日一句正能量前言文本分析语音识别机器翻译语义分析自然语言生成情感分析后记 每日一句正能量 努力学习&#xff0c;勤奋工作&#xff0c;让青春更加光彩。 前言 自然语言处理&#xff08;NLP&#xff09;是人工智能领域中与人类语言相关的重要研究方向&#xff0c…...

echarts:获取省、市、区/县、镇的地图数据

目录 第一章 前言 第二章 获取地图的数据&#xff08;GeoJSON格式&#xff09; 2.1 获取省、市、区/县地图数据 2.2 获取乡/镇/街道地图数据 第一章 前言 需求&#xff1a;接到要做大屏的需求&#xff0c;其中需要用echarts绘画一个地图&#xff0c;但是需要的地图是区/县…...

Java_简单模拟实现ArrayList_学习ArrayList

文章目录 一、 了解线性表和顺序表区别1.线性表2.顺序表 二、模拟实现1.定义接口2.定义MyArrayList3.成员变量以及构造方法4.实现打印数组5.实现add方法6.实现查找某个数是否存在contains或者某个数的下标indexOf7.获取或更改pos位置的值 get和set8.获取数组大小 size9.删除某个…...

动手学深度学习(一)深度学习介绍2

目录 二、起源 三、深度学习的成功案例&#xff1a; 四、特点&#xff1a; 五、小结&#xff1a; 二、起源 为了解决各种各样的机器学习问题&#xff0c;深度学习提供了强大的工具。 虽然许多深度学习方法都是最近才有重大突破&#xff0c;但使用数据和神经网络编程的核心思…...

vmware网络配置,VMware的三种网络模式详解与配置

vmware为我们提供了三种网络工作模式 vmware为我们提供了三种网络工作模式, 它们分别是: Bridged&#xff08;桥接模式&#xff09;、NAT&#xff08;网络地址转换模式&#xff09;、Host-Only&#xff08;仅主机模式&#xff09;。 VMware虚拟机的三种网络类型的适用场景如下…...

【Ubuntu】安装hbase

前提 需要安装java 安装 HBase 下载并解压 HBase 安装包&#xff1a; wget https://dlcdn.apache.org/hbase/2.5.7/hbase-2.5.7-bin.tar.gz tar -zxvf hbase-2.5.7-bin.tar.gz配置 HBase 环境变量&#xff1a; export HBASE_HOME/path/to/hbase-2.5.7 export PATH$PATH:$H…...

ubuntu16.04环境轻松安装和应用opencv4.9.0(基于源码编译)

目录 一、环境准备 1、安装cmake 2、安装依赖 3、从github上下载opencv4.9.0.zip 二、安装opencv4.9.0 1、解压4.9.0.zip 2、进入build目录编译 3、安装编译好的相关库 4、修改opencv配置文件并使其生效 5、添加PKG_CONFIG路径&#xff0c;并使其生效 三、opencv环境…...

FastBee开源物联网平台2.0开源版发布啦!!!

一、项目介绍 物美智能(wumei-smart)更名为蜂信物联(FastBee)。 FastBee开源物联网平台&#xff0c;简单易用&#xff0c;更适合中小企业和个人学习使用。适用于智能家居、智慧办公、智慧社区、农业监测、水利监测、工业控制等。 系统后端采用Spring boot&#xff1b;前端采用…...

【NeRF和NLP】一些观察感悟,碎碎念

NeRF的paper&#xff0c;有几个感想&#xff1a; NeRF读的时候感觉和diffusion思路特别像&#xff0c;训练目标是一个很小很小的子步骤&#xff0c;大大简化了训练难度NeRF建模的是“真实”世界&#xff0c;其用模型隐含的存储了真实世界的体素&#xff08;场&#xff09;模型…...

Python程序设计 基础数据类型

1.1 编程规范 注释 python注释也有自己的规范&#xff0c;在文章中会介绍到。注释可以起到一个备注的作用&#xff0c;团队合作的时候&#xff0c;个人编写的代码经常会被多人调用&#xff0c;为了让别人能更容易理解代码的通途&#xff0c;使用注释是非常有效的。 在说规范…...

浅谈安科瑞智能照明系统在马来西亚国家石油公司项目的应用

摘要&#xff1a;随着社会经济的发展及网络技术、通信技术的提高&#xff0c;人们对照明设计提出了新的要求&#xff0c;它不仅要控制照明光源的发光时间、 亮度&#xff0c;而且与其它系统来配合不同的应用场合做出相应的灯光场景。本文介绍了马亚西亚石油公司智能照明项目的应…...

Java面对对象

Java面向对象 面对对象概述&#xff0c;类与对象&#xff0c;继承&#xff0c;重写与重载&#xff0c;多态&#xff0c;抽象&#xff0c;封装&#xff0c;包&#xff0c;泛型&#xff0c;异常 面对对象概述 什么是面向对象&#xff08;OOP&#xff09; 面向对象(Object Ori…...

代码随想录算法训练营|day24

第七章 回溯算法 77.组合代码随想录文章详解总结 77.组合 以n5,k3为例 (1)for循环遍历&#xff0c;递归选择符合要求的值加入path&#xff0c;len(path)k时&#xff0c;返回 statrtIndex保证每次递归取到的值不重复 剪枝&#xff1a;i<n-(k-len(path))1 后续需要k-len(pat…...

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

无法与IP建立连接,未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

短视频矩阵系统文案创作功能开发实践,定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

Git常用命令完全指南:从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...