鸿蒙一次开发,多端部署(十一)设置应用页面

本小节以“设置”应用页面为例,介绍如何使用自适应布局能力和响应式布局能力适配不同尺寸窗口。

页面设计

为充分利用屏幕尺寸优势,应用常常有在小屏设备上单栏显示,大屏设备上左右分两栏显示的设计,设置应用页面设计如下。

观察“设置”应用页面设计,不同断点下“设置主页”、“WLAN页面”和“更多WLAN设置页面”几乎完全一致,只是在sm断点下采用单栏显示,在md和lg断点下采用双栏显示。

在前面的典型页面场景中,已经介绍了如何分析及实现不同断点下设计相似的单个页面,本小节将展开介绍如何实现不同断点下存在单栏和双栏设计的场景。

为了方便读者理解,本小节将围绕以下三个问题进行介绍。

  1. 如何实现单/双栏的显示效果
  2. 如何实现点击跳转或刷新
  3. 如何实现多级跳转

如何实现单/双栏的显示效果

开发者可以使用Row、Column、RowSplit 等基础的组件,实现分栏显示的效果,但是需要较多的开发工作量。方舟开发框架在API 9重构了 Navigation组件,开发者可以通过配置Navigation组件的属性,控制其按照单栏或双栏的效果进行显示。

Navigation组件由Navbar和Content两部分区域组成,Navigation组件支持Stack、Split以及Auto三种模式。Stack及Split模式下Navigation组件的表现如下图所示。

  • Stack模式

  • Split模式

  • Auto模式

    Auto模式是指Navigation组件可以根据应用窗口尺寸,自动选择合适的模式:窗口宽度小于520vp时,采用Stack模式显示;窗口宽度大于等于520vp时,采用Split模式显示。当窗口尺寸发生改变时,Navigation组件也会自动在Stack模式和Split模式之间切换。

说明:

  • Navigation组件提供的title、navBarWidth、navBarPosition等属性来调整其显示效果。Navigation组件样式的配置与其它组件类似,这里不做赘述。
  • 首次加载Navigation组件所在的页面时,如果Navigation组件处于Split模式,Navigation组件会自动激活其第一个NavRouter孩子节点(后文会展开介绍NavRouter)来刷新Content区域的显示。

设置主页的核心代码如下所示。Navigation组件默认处于Auto模式,其样式会根据应用窗口尺寸在单栏和双栏之间自动切换。

import { SettingList } from '@ohos/settingItems';@Entry
@Component
struct Index { build() {Navigation() {SettingList()}.title($r('app.string.settings')).navBarWidth('40%').width('100%').height('100%').backgroundColor($r("sys.color.ohos_id_color_sub_background"))}
}

//核心代码 SettingList.ets
import { MainItem } from '../components/MainItem';
import { ItemGroup } from '../components/ItemGroup';
import { SearchBox } from '../components/SearchBox';
import { MoreConnectionsItem } from '../moreconnections/MoreConnectionsItem';
import { WlanSettingItem } from '../wlan/WlanSettingItem';class  ItemObj {title?: Resourcetag?: Resourceicon?:Resource
}
let bluetoothTab:ItemObj={title: $r('app.string.bluetoothTab'),tag: $r('app.string.enabled'),icon: $r('app.media.blueTooth'),
}
let mobileData:ItemObj={title: $r('app.string.mobileData'),icon: $r('app.media.mobileData'),
}
let brightnessTab:ItemObj={title: $r('app.string.brightnessTab'),icon: $r('app.media.displayAndBrightness'),
}
let volumeControlTab:ItemObj={title: $r('app.string.volumeControlTab'),icon: $r('app.media.volume'),
}
let biometricsAndPassword:ItemObj={title: $r('app.string.biometricsAndPassword'),icon: $r('app.media.biometricsAndPassword'),
}
let applyTab:ItemObj={title: $r('app.string.applyTab'),icon: $r('app.media.application'),
}
let storageTab:ItemObj={title: $r('app.string.storageTab'),icon: $r('app.media.storage'),
}
let security:ItemObj={title: $r('app.string.security'),icon: $r('app.media.security'),
}
let privacy:ItemObj={title: $r('app.string.privacy'),icon: $r('app.media.privacy'),
}
let usersAccountsTab:ItemObj={title: $r('app.string.usersAccountsTab'),icon: $r('app.media.userAccounts'),
}
let systemTab:ItemObj={title: $r('app.string.systemTab'),icon: $r('app.media.system'),
}
let aboutTab:ItemObj={title: $r('app.string.aboutTab'),icon: $r('app.media.aboutDevice'),
}@Component
export struct SettingList {@BuilderCustomDivider() {Divider().strokeWidth('1px').color($r('sys.color.ohos_id_color_list_separator')).margin({ left: 48, right: 8 })}build() {List({ space: 12 }) {ListItem() {SearchBox()}.padding({ top: 8, bottom: 8 }).width('100%')ListItem() {ItemGroup() {WlanSettingItem()this.CustomDivider()MainItem(bluetoothTab)this.CustomDivider()MainItem(mobileData)this.CustomDivider()MoreConnectionsItem()}}ListItem() {ItemGroup() {MainItem(brightnessTab)}}ListItem() {ItemGroup() {MainItem(volumeControlTab)}}ListItem() {ItemGroup() {MainItem(biometricsAndPassword)this.CustomDivider()MainItem(applyTab)this.CustomDivider()MainItem(storageTab)this.CustomDivider()MainItem(security)this.CustomDivider()MainItem(privacy)}}ListItem() {ItemGroup() {MainItem(usersAccountsTab)this.CustomDivider()MainItem(systemTab)this.CustomDivider()MainItem(aboutTab)}}}.padding({ left: 12, right: 12 }).width('100%').height('100%').backgroundColor($r('sys.color.ohos_id_color_sub_background'))}
}        

如何实现点击跳转或刷新

Navigation组件通常搭配 NavRouter组件 以及 NavDestination组件 一起使用:

  • NavRouter组件用于控制Navigation组件Content区域的显示和刷新逻辑。
  • NavDestination组件用于实际刷新Navigation组件Content区域的显示。

刷新控制

NavRouter组件用于控制Navigation组件中Content区域的刷新逻辑,其必须包含两个孩子节点。

节点类型节点功能
第一个孩子节点容器类组件直接控制NavRouter的显示效果
第二个孩子节点NavDestination组件刷新Navigation组件Content区域的显示

NavRouter组件默认提供了点击响应处理,不需要开发者自定义点击事件逻辑。另外,NavRouter组件还提供了onStateChange回调事件,用于通知开发者NavRouter的状态:用户点击NavRouter,激活NavRouter并加载对应的NavDestination子组件时,回调onStateChange(true);NavRouter对应的NavDestination子组件不再显示时,回调onStateChange(false)。

结合设置应用的具体场景来看,上图1号小红框是NavRouter的第一个孩子节点,2号红框是NavRouter的第二个孩子节点,相应的核心代码实现如下。

import { MainItem } from '../components/MainItem';
import { WlanMoreSettingItem } from '../components/WlanMoreSettingItem';
import { SubItemToggle } from '../components/SubItemToggle';
import { SubItemWifi } from '../components/SubItemWifi';
import { ItemDescription } from '../components/ItemDescription';
import { ItemGroup } from '../components/ItemGroup';class  MainItemObj {title?: Resourcetag?: stringicon?:Resourcelabel?: string
}
let mainItem:MainItemObj={title: $r('app.string.wifiTab'),tag: 'UX',icon: $r('app.media.wlan'),label: 'WLAN'
}
@Component
export struct WlanSettingItem {@LocalStorageLink('selectedLabel') selectedLabel: string  = ''build() {Column() {NavRouter() {MainItem(mainItem)NavDestination() {WlanSetting()}.title($r('app.string.wifiTab')).backgroundColor($r('sys.color.ohos_id_color_sub_background'))}}}
}
@Component
struct WlanSetting {@Builder CustomDivider() {Divider().strokeWidth('1px').color($r('sys.color.ohos_id_color_list_separator')).margin({left: 12, right: 8})}build() {Column() {Column() {ItemGroup() {SubItemToggle({title: $r('app.string.wifiTab'), isOn: true})}Row().height(16)ItemGroup() {WlanMoreSettingItem()}}.margin({bottom: 19.5}).flexShrink(0)Scroll() {Column() {ItemDescription({description: $r('app.string.wifiTipConnectedWLAN')}).padding({left: 12,right: 12,bottom: 9.5})ItemGroup() {SubItemWifi({title: 'UX',subTitle: $r('app.string.wifiSummaryConnected'),isConnected: true,icon: $r('app.media.ic_wifi_signal_4_dark')})}Column() {ItemDescription({description: $r('app.string.wifiTipValidWLAN')}).margin({left: 12,right: 12,top: 19.5,bottom: 9.5})ItemGroup() {SubItemWifi({title: 'Huwe-yee',subTitle: $r('app.string.wifiSummaryEncrypted'),isConnected: false,icon: $r('app.media.ic_wifi_lock_signal_4_dark')})this.CustomDivider()SubItemWifi({title: 'UX-5G',subTitle: $r('app.string.wifiSummaryOpen'),isConnected: false,icon: $r('app.media.ic_wifi_signal_4_dark')})this.CustomDivider()SubItemWifi({title: 'E1-AP',subTitle: $r('app.string.wifiSummarySaveOpen'),isConnected: false,icon: $r('app.media.ic_wifi_signal_4_dark')})}}}}.scrollable(ScrollDirection.Vertical).scrollBar(BarState.Off).width('100%').flexShrink(1)}.width('100%').height('100%').padding({left: 12, right: 12})}
}

显示刷新

NavDestination组件用于实际刷新Navigation组件Content区域的显示。激活后的NavRouter对应的NavDestination组件,会占满整个Content区域并刷新其显示。

开发者可以通过NavDestination组件提供的如下属性,调整其最终显示效果:

  • backgroundColor:设置NavDestination组件的背景色。
  • title:自定义NavDestination组件的标题。
  • hideTitleBar:隐藏NavDestination组件的标题栏。

特别的,Navigation组件会根据当前的状态决定是否在NavDestination组件标题栏起始部分自动添加返回键图标。当Navigation组件添加了返回键图标时,还可以自动响应及处理系统三键导航中的返回键事件。

如何实现多级跳转

可以在NavDesination组件中,继续使用NavRouter组件,以实现多级跳转。多级跳转场景下,Navigation组件同样会根据当前的状态决定是否自动添加返回键图标及响应系统三键导航中的返回键事件。

结合具体场景,红框3是一个NavRouter组件,点击后可以控制Navigation组件中的Content区域刷新为红框4对应的NavDestination组件吗,其核心代码实现如下所示。


import { SubItemArrow } from '../components/SubItemArrow';//组件请参考相关示例
import { SubItemToggle } from '../components/SubItemToggle';
import { ItemGroup } from '../components/ItemGroup';
import { ItemDescription } from '../components/ItemDescription';class SubItemArrowObj{title?: Resource
}
let subItemArrow:SubItemArrowObj={title: $r('app.string.moreWlanSettings')
}
@Component
export struct WlanMoreSettingItem {@LocalStorageLink('selectedLabel') selectedLabel: string = ''build() {NavRouter() {SubItemArrow(subItemArrow)NavDestination() {WlanMoreSetting()}.title($r('app.string.moreWlanSettings')).backgroundColor($r('sys.color.ohos_id_color_sub_background'))}}
}@Component
export struct WlanMoreSetting {build() {Scroll() {Column() {ItemGroup() {SubItemArrow({title: $r('app.string.wlanPlus'),tag: $r('app.string.enabled')})}ItemDescription({description: $r('app.string.wlanPlusTip')}).margin({top: 8,bottom: 24,left: 12,right: 12})ItemGroup() {SubItemArrow({ title: $r('app.string.wlanDirect') })}Blank().height(12)ItemGroup() {SubItemToggle({title: $r('app.string.wlanSecurityCheck')})}ItemDescription({description: $r('app.string.wlanSecurityCheckTip')}).margin({top: 8,bottom: 24,left: 12,right: 12})ItemGroup() {SubItemArrow({title: $r('app.string.savedWlan')})Divider().strokeWidth('1px').color($r('sys.color.ohos_id_color_list_separator')).margin({left: 12, right: 8})SubItemArrow({title: $r('app.string.installCertificates')})}}.backgroundColor($r('sys.color.ohos_id_color_sub_background')).padding({left: 12, right: 12})}.scrollBar(BarState.Off).width('100%')}
}

总结

本示例的基础导航结构上图所示:

  • 激活SettingList中的WLANSettingItem,可以加载及显示WlanSetting
  • 激活WlanSetting中的WlanMoreSettingItem,可以加载及显示WlanMoreSetting

Navigation组件支持自动切换单栏和双栏的显示效果,同时可以根据当前状态自动添加返回键及响应系统的返回键事件。借助Navigation组件,开发者不用关心单栏和双栏场景的差异而更关注于应用本身,极大的减少开发工作量及提高开发效率。

为了能让大家更好的学习鸿蒙(HarmonyOS NEXT)开发技术,这边特意整理了《鸿蒙开发学习手册》(共计890页),希望对大家有所帮助:https://qr21.cn/FV7h05

《鸿蒙开发学习手册》:

如何快速入门:https://qr21.cn/FV7h05

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. ……

开发基础知识:https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ……

基于ArkTS 开发:https://qr21.cn/FV7h05

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. ……

鸿蒙开发面试真题(含参考答案):https://qr18.cn/F781PH

鸿蒙开发面试大盘集篇(共计319页):https://qr18.cn/F781PH

1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/763059.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

不要取和所用方法名字相同的类

package 练习; import java.util.*; public class StringBuilder {public static void main(String[] args){Scanner scan new Scanner(System.in);String r scan.nextLine();StringBuilder x new StringBuilder(r);System.out.println(x);}} 奉上错误代码(上面&…

qt5-入门-标签页部件QTabWidget-1

参考: C GUI Programming with Qt 4, Second Edition 本地环境: win10专业版,64位,Qt5.12 目录 效果实现Qt Designer操作代码addStretch()解释 效果 首页有三个按钮和最近文件列表。 拖动窗口,按钮和文件列表仍然处…

【C++】1600. 请假时间计算

问题:1600. 请假时间计算 类型:基本运算、整数运算 题目描述: 假设小明的妈妈向公司请了 n 天的假,那么请问小明的妈妈总共请了多少小时的假,多少分钟的假?(提示: 1 天有 24 小时&…

关于UDS刷写的一些杂谈

最近在做CAPL编写UDS刷写上位机的工作,后续过来更新现在这里查个眼,以免后面忘记了。 下面放一些可能会用到的知识点: 1.一般的刷写流程如下所示: 红色标记代表为功能寻址。 预编程:10 01,10 83&#xf…

Linux——du, df命令查看磁盘空间使用情况

一、实现原理: df 命令的全称是Disk Free ,显而易见它是统计磁盘中空闲的空间,也即空闲的磁盘块数。它是通过文件系统磁盘块分配图进行计算出的。 du 命令的全称是 Disk Used ,统计磁盘有已经使用的空间。它是直接统计各文件各目…

HarmonyOS4.0—自定义渐变导航栏开发教程

前言 今天要分享的是一个自定义渐变导航栏,本项目基于鸿蒙4.0。 先看效果: 这种导航栏在开发中也比较常见,特点是导航栏背景色从透明到不透明的渐变,以及导航栏标题和按钮颜色的变化。 系统的导航栏无法满足要求,我们…

8868体育助力西甲赫罗纳 争冠黑马惨遭掀翻

西甲的赫罗纳足球俱乐部是8868体育助力的球队之一,西甲排名第12的赫塔费队迎来了西甲第29轮的较量,赫塔费队此役坐镇自己的主场PK赛前排名第2的争冠超级黑马赫罗纳队。 赛前赫塔费队已经连续4轮联赛不胜(2平2负状态低迷)&#xff…

力扣 字符串解码

维护一个放数字的栈&#xff0c;一个放字母的栈 遇到[把数字和字母入栈&#xff0c;遇到]把当前字母循环加上数字栈头遍的字母栈头 class Solution { public:string decodeString(string s) {string ans"";stack<int>sz;stack<string>zm;里面是string …

一文讲清!进销存管理系统如何实现锁库及库存冻结?计算月加权平均成本?

进销存管理系统中的锁库及库存冻结如何实现&#xff1f;进销存管理系统如何计算月加权平均成本&#xff1f;进销存管理系统又该如何统计和预测采购需求&#xff1f;这些进销存管理难题困扰着许多企业管理者。本文将结合数年从业经验&#xff0c;深入探讨这些进销存管理难题&…

面试算法-83-不同路径 II

题目 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish”&#xff09;。 现在考虑网格中有障碍物。那么从左上角到…

saas架构使用实现

saas架构使用实现 saas是什么 多租户架构——是指在同一个系统中&#xff0c;为不同的客户提供不同的部署环境&#xff0c;各个客户之间的数据和操作是相互独立的。这种架构可以大幅降低系统的开发和运维成本&#xff0c;同时也能提高系统的可扩展性和灵活性。每个用户有自己特…

苹果电脑不能删除移动硬盘文件 苹果电脑移动硬盘只读模式如何更改 移动硬盘文件或目录损坏且无法读取怎么办

当我们将移动硬盘插入苹果电脑后&#xff0c;发现无法对移动硬盘中的文件进行编辑该怎么办&#xff1f;相信有不少网友遇到过这类情况。苹果电脑不能删除移动硬盘文件&#xff0c;或无法拷贝硬盘里的文件。今天我为大家解决苹果电脑移动硬盘只读模式如何更改的问题&#xff0c;…

superset 二开增加 flink 数据源连接通过flink sql 查询数据

前言 superset 目前还不支持 flink 的数据源连接&#xff0c;目前我们公司在探索使用数据湖那一套东西&#xff1a; 使用 flink 作为计算引擎使用 paimon oss对象存储对接 flink 作为底层存储使用 superset 通过 flink gateway 查询 paimon 数据形成报表 增加flink数据源 …

git push出错: src refspec dev/xxx does not match any

使用如下命令gitp push出错: git push origin 远端分支名 git push origin dev/xxxx error: src refspec dev/xxxx does not match any error: failed to push some refs to https://git.woa.com/..... 解决方案 1: git push origin 本地分支名:远端分支名 解决方案2&#…

docker进阶篇,docker集群介绍

docker swarm 官网&#xff1a;https://docs.docker.com/engine/swarm/how-swarm-mode-works/nodes/ 什么是 docker swarm docker swarm 是 docker 官方提供的容器编排和集群管理工具。它允许用户将多个 docker 主机组成一个虚拟的 docker 集群&#xff0c;以便更高效地管理…

互联网环境下工厂生产企业的数字化转型路径研究

hello宝子们...我们是艾斯视觉擅长ui设计和前端开发10年经验&#xff01;希望我的分享能帮助到您&#xff01;如需帮助可以评论关注私信我们一起探讨&#xff01;致敬感谢感恩&#xff01; 随着互联网技术的飞速发展&#xff0c;数字化已经成为企业提升竞争力的重要手段。对于工…

四信雨水情监测系统,助力构建“三道防线”精准防洪

近年来&#xff0c;我国突破历史记录、颠覆传统认知的水旱灾害频繁发生&#xff0c;依靠传统监测预报手段已难以满足当前洪水防御工作的需求。为贯彻“两个坚持、三个转变”的防灾减灾救灾理念&#xff0c;保障人民群众生命财产安全赢得时机&#xff0c;就必须进一步强化应对洪…

Cadence OrCAD使用小技巧

Cadence是公司名&#xff0c;Allegro&#xff08;俗称阿狸狗&#xff09;是该公司旗下的EDA工具品牌&#xff0c;OrCAD是该公司收购公司的EDA工具品牌。 OrCAD这个产品线是Cadence收购来的&#xff0c;Allegro才是嫡系。 注意&#xff1a;dsn不能放在中文路径下。 开机选captur…

20240316-1-向量化搜索

向量化搜索 在高维空间内快速搜索最近邻&#xff08;Approximate Nearest Neighbor&#xff09;。召回中&#xff0c;Embedding向量的搜索。 FAISS、kd-tree、局部敏感哈希、【Amnoy、HNSW】 FAISS faiss是Facebook的AI团队开源的一套用于做聚类或者相似性搜索的软件库&…

ITK零碎笔记

1、ITK提取等高线&#xff08;区域轮廓&#xff09; itk::ContourExtractor2DImageFilter typedef itk::ContourExtractor2DImageFilter<FSliceType> ContourExtractorType; ContourExtractorType::Pointer contourFilter ContourExtractorType::New(); contourFilter-…