深圳网站开发费用,建立新网站要多少钱,wordpress同步至订阅号,网站在线答题怎么做介绍
随着智能设备类型的不断丰富#xff0c;用户可以在不同的设备上享受同样的服务#xff0c;但由于设备形态不尽相同#xff0c;开发者往往需要针对具体设备修改或重构代码#xff0c;以实现功能完整性和界面美观性的统一。OpenHarmony为开发者提供了“一次开发#x…介绍
随着智能设备类型的不断丰富用户可以在不同的设备上享受同样的服务但由于设备形态不尽相同开发者往往需要针对具体设备修改或重构代码以实现功能完整性和界面美观性的统一。OpenHarmony为开发者提供了“一次开发多端部署”的系统能力让开发者可以基于一次开发快速构建不同类型终端上的应用降低开发成本提高开发效率。
本篇Codelab基于“一次开发多端部署”提供的自适应布局和响应式布局能力实现了常见的视频播放应用的主界面。通过三层工程结构尽可能复用了部分代码并根据设备尺寸的区别设计了对应的页面以兼顾美观和易用。应用被打开时会根据具体的设备形态显示对应的UI界面其中RK3568开发板的首页效果如图所示 相关概念
一次开发多端部署指一套代码工程一次开发上架多端按需部署目标是支撑开发者高效地开发支持多种终端设备形态的应用。自适应布局当外部容器大小发生变化时元素可以根据相对关系自动变化以适应外部容器变化的布局能力。相对关系如占比、固定宽高比、显示优先级等。当前自适应布局能力有7种拉伸能力、均分能力、占比能力、缩放能力、延伸能力、隐藏能力、折行能力。自适应布局能力可以实现界面显示随外部容器大小连续变化。响应式布局当外部容器大小发生变化时元素可以根据断点、栅格或特定的特征如屏幕方向、窗口宽高等自动变化以适应外部容器变化的布局能力。当前响应式布局能力有3种断点、媒体查询、栅格布局。GridRow栅格容器组件仅可以和栅格子组件GridCol在栅格布局场景中使用。GridCol栅格子组件必须作为栅格容器组件GridRow的子组件使用。
环境搭建
软件要求
DevEco Studio版本DevEco Studio 3.1 Release。OpenHarmony SDK版本API version 9。
硬件要求
开发板类型润和RK3568开发板。OpenHarmony系统3.2 Release。
环境搭建
完成本篇Codelab我们首先要完成开发环境的搭建本示例以RK3568开发板为例参照以下步骤进行
获取OpenHarmony系统版本标准系统解决方案二进制。以3.2 Release版本为例 2.搭建烧录环境。
完成DevEco Device Tool的安装完成RK3568开发板的烧录
3.搭建开发环境。
开始前请参考工具准备完成DevEco Studio的安装和开发环境配置。开发环境配置完成后请参考使用工程向导创建工程模板选择“Empty Ability”。工程创建完成后选择使用真机进行调测。
代码结构解读
本篇Codelab只对核心代码进行讲解对于完整代码我们会在gitee中提供。
“一次开发多端部署”推荐使用三层目录的工程结构来管理工程上层目录包括common、features和productcommon为公共特性目录存放不同形态设备公用的类和常量features为功能模块目录存放应用的各个功能模块product为产品层目录存放不同形态设备范类代码。本Codelab不涉及功能特性因此只存在common、product两个分层。
├──common // 公共能力层
│ ├──src/main/ets
│ │ ├──constants
│ │ │ └──CommonConstants.ets // 公共常量类
│ │ ├──utils
│ │ │ └──BreakpointSystem.ets // 断点工具类
│ │ └──viewmodel // 资源类接口
│ │ ├──BottomTabsItem.ets
│ │ ├──DriveTabsItem.ets
│ │ ├──FindTabsItem.ets
│ │ ├──HomeTabsItem.ets
│ │ └──MineTabsItem.ets
│ └──src/main/resources // 资源文件夹
└──product // 产品定制层├──default/src/main/ets // 支持手机含折叠屏、平板│ ├──entryability│ │ └──EntryAbility.ts // 程序入口类│ ├──pages│ │ └──MainPage.ets // 主页面│ ├──view│ │ ├──BottomTabsComponent.ets // 底部页签组件│ │ ├──DriveTabsComponent.ets // 云盘页组件│ │ ├──FindTabsComponent.ets // 发现页组件│ │ ├──HomeTabsComponent.ets // 首页组件│ │ ├──LeftTabsComponent.ets // 侧边栏组件│ │ ├──MineTabsComponent.ets // 个人页组件│ │ ├──RecentlyPlayedComponent.ets // “最近播放”列表│ │ └──RecommendComponent.ets // “为你推荐”列表│ └──viewmodel│ ├──BottomTabsModel.ets // 底部页签model│ ├──DriveTabsModel.ets // 云盘页model│ ├──FindTabsModel.ets // 发现页model│ ├──HomeTabsModel.ets // 首页model│ └──MineTabsModel.ets // 个人页model└──default/src/main/resources // 资源文件夹
主页面框架设计
为了操作便捷和充分利用不同形态设备的屏幕空间按屏幕宽度的大小将设备划分为3类
sm320vpwidth520vp典型设备为手机。md520vpwidth840vp典型设备为折叠屏。lg840vpwidth典型设备为平板或PC。
根据用户使用场景当操作设备尺寸为sm或md时一般为竖向使用此时用于切换应用页面的页签栏适合置于底部。当操作设备尺寸为lg时一般为横向使用此时页签栏适合置于左侧。
// MainPage.ets
Entry
Component
struct MainPage {...build() {SideBarContainer(SideBarContainerType.Embed) {LeftTabs({ bottomTabIndex: $bottomTabIndex }); // 侧边栏Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.End, justifyContent: FlexAlign.End }) {Tabs({ barPosition: BarPosition.End, index: 0, controller: this.controller }) {... // 页面内容}if (this.currentBreakpoint ! Const.LG) {BottomTabs({ bottomTabIndex: $bottomTabIndex }) // 底部栏当屏幕尺寸不为lg时显示}}.width(Const.FULL_SIZE).backgroundColor($r(app.color.background_color))}.showSideBar(this.currentBreakpoint Const.LG) // 当屏幕尺寸为lg时显示侧边栏.showControlButton(false).sideBarWidth(Const.SIDEBAR_WIDTH).maxSideBarWidth(Const.SIDEBAR_WIDTH_MAX).minSideBarWidth(Const.SIDEBAR_WIDTH_MIN)}
}
各页面代码实现
首页
首页显示轮播图和“最近播放”、“为你推荐”两个列表轮播图根据屏幕尺寸的区别有显示数量的不同sm为1md为2lg为3列表使用具备自适应布局能力的List组件。
// HomeTabsComponent.ets
Component
export struct HomeTabs {Link currentBreakpoint: string;private scroller: Scroller new Scroller();build() {Scroll(this.scroller) {GridRow({// 设置sm、md和lg的布局列数分别为4、8、12columns: { xs: Const.GRID_4, sm: Const.GRID_4, md: Const.GRID_8, lg: Const.GRID_12 },gutter: { x: $r(app.float.gutter_home) },breakpoints: { value: [Const.BREAKPOINTS_SM, Const.BREAKPOINTS_MD, Const.BREAKPOINTS_LG] }}) {GridCol({ span: { xs: Const.GRID_4, sm: Const.GRID_4, md: Const.GRID_8, lg: Const.GRID_12 } }) {... // 标题}.height($r(app.float.title_height)).margin({ bottom: $r(app.float.home_margin1) })// 搜索栏在sm、md下占满全部列在lg下占8列GridCol({ span: { xs: Const.GRID_4, sm: Const.GRID_4, md: Const.GRID_8, lg: Const.GRID_8 } }) {... // 搜索栏}.height($r(app.float.home_grid_height1))GridCol({ span: { xs: Const.GRID_4, sm: Const.GRID_4, md: Const.GRID_8, lg: Const.GRID_12 } }) {Swiper() {...}.height($r(app.float.home_swiper_height)).itemSpace(Const.ITEM_SPACE)// 根据屏幕尺寸大小选择不同的轮播图数量.displayCount(this.currentBreakpoint Const.LG ?Const.NUM_3 : (this.currentBreakpoint Const.MD ? Const.NUM_2 : Const.NUM_1))}.height($r(app.float.home_grid_height2))GridCol({ span: { xs: Const.GRID_4, sm: Const.GRID_4, md: Const.GRID_8, lg: Const.GRID_12 } }) {... // ”最近播放”列表}.height($r(app.float.home_grid_height3))GridCol({ span: { xs: Const.GRID_4, sm: Const.GRID_4, md: Const.GRID_8, lg: Const.GRID_12 } }) {... // ”为你推荐”列表 }.height($r(app.float.home_column_height))}.height(Const.FULL_SIZE)}...}
}
发现页
发现页使用栅格布局实现“一次开发多端部署”能力把sm设置为4列md设置为8列lg设置为12列。热播榜单在不同设备尺寸上分别占据4列、6列和8列。
// FindTabsComponent.ets
Component
export struct FindTabs {private scroller: Scroller new Scroller();build() {Scroll(this.scroller) {GridRow({// 设置sm、md和lg的布局列数分别为4、8、12columns: { xs: Const.GRID_4, sm: Const.GRID_4, md: Const.GRID_8, lg: Const.GRID_12 },gutter: { x: $r(app.float.gutter_find) },breakpoints: { value: [Const.BREAKPOINTS_SM, Const.BREAKPOINTS_MD, Const.BREAKPOINTS_LG] }}) {GridCol({ span: { xs: Const.GRID_4, sm: Const.GRID_4, md: Const.GRID_8, lg: Const.GRID_12 } }) {... // 标题}.height($r(app.float.title_height))LazyForEach(new FindDataSource(FindTabsList), (item: FindTabsItem) {// 设置热播榜单在sm、md和lg上分别占据4、6、8列并且设置offset属性保证在不同设备形态上都能保持居中GridCol({span: { xs: Const.GRID_4, sm: Const.GRID_4, md: Const.GRID_6, lg: Const.GRID_8 },offset: {md: FindTabsList.indexOf(item) Const.OFFSET_0 ? Const.OFFSET_1 : Const.OFFSET_2,lg: FindTabsList.indexOf(item) Const.OFFSET_0 ? Const.OFFSET_2 : Const.OFFSET_4}}) {... // 榜单内容}}, (item: FindTabsItem) JSON.stringify(item))}}...}
}
RK3568开发板上发现页的实际效果如图所示 云盘页
云盘页的栅格划分和发现页相同但是每个子组件在所有屏幕尺寸上都只占据2列。
// DriveTabsComponent.ets
Component
export struct DriveTabs {private scroller: Scroller new Scroller();build() {Scroll(this.scroller) {GridRow({// 设置sm、md和lg的布局列数分别为4、8、12columns: { xs: Const.GRID_4, sm: Const.GRID_4, md: Const.GRID_8, lg: Const.GRID_12 },gutter: { x : $r(app.float.gutter_drive) },breakpoints: { value: [Const.BREAKPOINTS_SM, Const.BREAKPOINTS_MD, Const.BREAKPOINTS_LG] }}) {GridCol({ span: { xs: Const.GRID_4, sm: Const.GRID_4, md: Const.GRID_8, lg: Const.GRID_12 } }) {... // 标题}.height($r(app.float.title_height))ForEach(DriveList, (item: DriveTabsItem) {// 设置云盘内容在sm、md和lg上均占据2列GridCol({ span: { xs: Const.NUM_2, sm: Const.NUM_2, md: Const.NUM_2, lg: Const.NUM_2 } }) {... // 云盘内容}}, (item: DriveTabsItem) JSON.stringify(item))}}...}
}
RK3568开发板上云盘页的实际效果如图所示 个人页
个人页的栅格划分仍然和发现页相同但子组件在sm、md形态下占满全部列在lg形态下只占据8列。
// MineTabsComponent.ets
Component
export struct MineTabs {private scroller: Scroller new Scroller();build() {Scroll(this.scroller) {GridRow({// 设置sm、md和lg的布局列数分别为4、8、12columns: { xs: Const.GRID_4, sm: Const.GRID_4, md: Const.GRID_8, lg: Const.GRID_12 },gutter: { x: $r(app.float.gutter_mine) },breakpoints: { value: [Const.BREAKPOINTS_SM, Const.BREAKPOINTS_MD, Const.BREAKPOINTS_LG] }}) {// 设置个人页在sm和md上占满全部列在lg上占8列为保证居中在lg上设置offset为2列GridCol({span: { xs: Const.GRID_4, sm: Const.GRID_4, md: Const.GRID_8, lg: Const.GRID_8 },offset: { lg: Const.OFFSET_2 }}) {... // 个人页内容}}.height(Const.FULL_SIZE).backgroundColor($r(app.color.mine_background_color))}...}
}
RK3568开发板上个人页的实际效果如图所示 总结
您已经完成了本次Codelab的学习并了解到以下知识点
根据设备尺寸形态设计不同的页面布局。使用栅格布局实现“一次开发多端部署”能力。 为了帮助大家更深入有效的学习到鸿蒙开发知识点小编特意给大家准备了一份全套最新版的HarmonyOS NEXT学习资源获取完整版方式请点击→《HarmonyOS教学视频》
HarmonyOS教学视频语法ArkTS、TypeScript、ArkUI等.....视频教程 鸿蒙生态应用开发白皮书V2.0PDF
获取完整版白皮书方式请点击→《鸿蒙生态应用开发白皮书V2.0PDF》 鸿蒙 (Harmony OS)开发学习手册
一、入门必看
应用开发导读(ArkTS)…… 二、HarmonyOS 概念
系统定义技术架构技术特性系统安全........ 三、如何快速入门《做鸿蒙应用开发到底学习些啥》
基本概念构建第一个ArkTS应用…… 四、开发基础知识
应用基础知识配置文件应用数据管理应用安全管理应用隐私保护三方应用调用管控机制资源分类与访问学习ArkTS语言…… 五、基于ArkTS 开发
Ability开发UI开发公共事件与通知窗口管理媒体安全网络与链接电话服务数据管理后台任务(Background Task)管理设备管理设备使用信息统计DFX国际化开发折叠屏系列…… 更多了解更多鸿蒙开发的相关知识可以参考《鸿蒙 (Harmony OS)开发学习手册》
