当前位置: 首页 > 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…...

TDengine 快速体验(Docker 镜像方式)

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

React Native 导航系统实战(React Navigation)

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

C# SqlSugar:依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...