如何快速体验鸿蒙全新声明式UI框架ArkUI?
HDC2021将于10月22日在东莞松山湖正式开幕,大会将设立Codelab体验专区,超多好玩、有趣的Demo等你体验。想快速入门HarmonyOS?学习HarmonyOS新特性?以下几个Codelab Demo不容错过~
极简声明式UI框架ArkUI
随着用户设备类型的不断增加,手机、平板、大屏、车载、穿戴等设备对应用UI界面开发提出了更加多样化的诉求,应用开发者在开发应用界面的时候要考虑多种设备场景,从而导致工程代码量增加,甚至需要维护多个工程来适配不同设备。
HarmonyOS提供一套极简声明式UI范式开发框架ArkUI,是HarmonyOS提供的一套基于JS/TS语言的开发能力集合,旨在帮助应用开发者高效开发跨端应用UI界面,自动适配多种不同的屏幕形态,开发者无需关心框架如何实现UI绘制和渲染,只需聚焦应用开发,从而实现极简高效地开发。
本篇Codelab为大家展示的是如何使用ArkUI开发范式快速开发一个有转场动画、页面上下滑动,双击可以放大或缩小图片,左右滑动可以切换图片功能的UI界面,效果如图1所示:

更多ArkUI详情,请前往官网Codelab:https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/HarmonyOS-EtsUI
ArkUI基础组件Slider的使用
Slider是一个滑动组件,常用的场景有音乐播放进度条、系统音量调节、屏幕亮度调节等。凡是和进度有关的场景,都可以尝试用一下这个组件。
HarmonyOS 极简声明式UI开发框架(ArkUI)提供了丰富的接口和组件,在本Codelab中,我们将通过一个简单的样例,学习Slider组件的使用,还将搭配Image组件、Slider组件、Text组件共同实现一个可调节的风车动画,完成效果如图2所示:

更多ArkUI基础组件Slider开发详情,前往官网Codelab:
https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/HarmonyOS-ETS-Slider
一次开发多端部署
在多场景多终端的时代,消费者期待在不同终端上获得同样的体验和服务,操作也应该像使用同一个设备一样。这使开发者面临很大的挑战,因为不同设备形态/硬件差异大,开发者需要对多种设备开发多套代码。
一次开发,多端部署通过多终端统一编程框架、自动适配多终端硬件能力的统一抽象UI控件,以及为不同屏幕的终端提供自适应布局,开发者无需针对不同设备开发多套代码,只需一套应用工程,就可以在多种终端部署。不仅提高了开发效率,还降低了代码的维护难度。
本篇Codelab使用ArkUI实现一次开发多端部署,效果预览如图3所示:

更多“一次开发,多端部署”开发详情,前往官网Codelab:
https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/HarmonyOS-EtsMultiDeployment
平行视界
平行视界是一种实现在应用内双窗口显示的方案,适用于平板、折叠屏展开态等大屏幕设备。简单来说,就是将设备横屏使用,进入“平行视界”模式后,一个应用将会分为左右两屏显示,两边互不干扰。
例如:浏览网页查找资料的时候,你可以一边看搜索结果一边看点开后的具体网页,资料查找的效率大大提升……
本篇Codelab主要利用平行视界实现应用内双窗口,将两个Ability左右显示在同一个应用的不同窗口。左侧页面展示图片列表,可根据屏幕宽度自适应调节图片布局;右侧页面展示选择的图片,可对图片进行裁剪、缩放、镜像、保存、流转操作。效果如图4所示:左边是图片库,右边是查看大图,两者搭配,效率加倍。

更多平行视界开发详情,前往官网Codelab:https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/HarmonyOS-ParallelHorizon
想了解更多HarmonyOS新特性Codelab?HDC2021 Codelab体验专区等你来~
更多精彩内容,请见华为开发者官方论坛→https://developer.huawei.com/consumer/cn/forum/home?ha_source=sanfang
如何快速体验鸿蒙全新声明式UI框架ArkUI?的更多相关文章
- HDC技术分论坛:HarmonyOS新一代UI框架的全面解读
作者:yuzhiqiang,UI编程框架首席技术专家 在Harmony 3.0.0开发者预览版中,包含了新一代的声明式UI框架ArkUI 3.0.多语言跨平台编译器ArkCompiler 3.0.跨端 ...
- Flutter 1.5 发布,正式成为全平台 UI 框架!
一. 序 在 Google I/O 2019 上,Dart 团队宣布推出新的 Flutter 稳定版本 1.5,这是 Flutter 迄今为止最大的一次版本发布. 伴随着 Flutter 1.5 的发 ...
- 乘风破浪,遇见Android Jetpack之Compose声明式UI开发工具包,逐渐大一统的原生UI绘制体系
什么是Android Jetpack https://developer.android.com/jetpack Android Jetpack是一个由多个库组成的套件,可帮助开发者遵循最佳做法.减少 ...
- 2015年最全的移动WEB前端UI框架
目前,众多互联网公司APP都嵌入了大量的HTML5,移动端的开发越来越重视,HTML5的运用场景也越来越多了.在移动WEB开发的过程中,使用合适的移动WEB UI框架可以大大提升我们的开发效率.下面P ...
- 这是一个比较全的Android UI 组件
Android组件及UI框架大全 原文地址:http://blog.csdn.net/smallnest/article/details/38658593 Android 是目前最流行的移动操作系统 ...
- Jmeter压测快速体验
前言 最近在看neo4j相关的官网文档以及一些调优参数,同时也学了下Jmeter,为了测试下neo4j服务的性能,虽然不是专业搞测试的,但是我觉得每个优秀的开发者都应该学会主动压测自己服务和代码的性能 ...
- Mac最新Flutter环境搭建运行和对比理解声明式UI
前言 这段时间一直都在学习和写关于SwiftUI的东西,前面也总结了四篇文章来大体上说了下Demo中功能实现的一些细节,后面准备开始了解学习一下Flutter,争取在年前能再用Flutter写一份项目 ...
- 12个优秀用户体验的移动应用程序 UI 设计
最美丽的,现代化的和惊人的移动 UI 设计就在这里.今天,我们挑选了12个来自 Behance 和 Dribbble 网站的优秀用户体验的手机界面设计.这些界面设计作品都是由世界各地的优秀设计师分享, ...
- gitbook 入门教程之快速体验
本文主要介绍三种使用 gitbook 的方式,分别是 gitbook 命令行工具,Gitbook Editor 官方编辑器和 gitbook.com 官网. 总体来说,三种途径适合各自不同的人群,找到 ...
随机推荐
- 揭秘盒马鲜生 Android 短视频秒播优化方案
短视频作为内容重要的承载方式,是吸引用户的重点,短视频的内容与体验直接关系到用户是否愿意长时停留.因此,体验的优化就显得尤为重要.上一篇我们分享了 iOS 短视频秒播优化,这篇我们来聊聊 Androi ...
- FastReport合并多份报表为一份预览打印
效果 比较简单,直接贴代码 //打印第一份报表 procedure TForm1.Button2Click(Sender: TObject); begin frxReport1.LoadFromFil ...
- C# Dapper基本三层架构使用 (三、BLL)
BLL层介绍 业务逻辑层用于做一些有效性验证的工作,以更好的保证程序运行的健壮性.如完成数据添加.修改和查询业务等:不允许指定的文本框中输入空字符串,数据格式是否正确以及数据类型验证:用户权限的合法性 ...
- systemctl添加自定义系统服务
[Service] Type=forking ExecStart=绝对路径 ExecStop=绝对路径 ExecReload=绝对路径 以上最精简版,文件/usr/lib/systemd/system ...
- 多线程run()方法是不能够被直接调用的
操作系统线程的五种状态: 1.新建状态(New):新创建了一个线程对象. 2.就绪状态(Runnable):线程对象创建后,其他线程调用了该对象的start()方法.该状态的线程位于"可运行 ...
- 最小生成树-普利姆(Prim)算法
最小生成树-普利姆(Prim)算法 最小生成树 概念:将给出的所有点连接起来(即从一个点可到任意一个点),且连接路径之和最小的图叫最小生成树.最小生成树属于一种树形结构(树形结构是一种特殊的图),或者 ...
- javascript 享元模式 flyweight
* 适应条件 ** 一个程序中使用了大量的相似对象 造成大的内存开销 ** 对象的大多数状态都可以变为外部状态 ** 剥离出对象的外部状态之后, 可以使用相对较少的共享对象取代大量对象 * 上传文件的 ...
- [源码解析] PyTorch 流水线并行实现 (3)--切分数据和运行时系统
[源码解析] PyTorch 流水线并行实现 (3)--切分数据和运行时系统 目录 [源码解析] PyTorch 流水线并行实现 (3)--切分数据和运行时系统 0x00 摘要 0x01 分割小批次 ...
- 判断javaScript变量是Ojbect类型还是Array类型
JavaScript是弱类型的语言,所以对变量的类型并没有强制控制类型.所以声明的变量可能会成为其他类型的变量, 所以在使用中经常会去判断变量的实际类型. 对于一般的变量我们会使用typeof来判 ...
- Spring Cloud Gateway 没有链路信息,我 TM 人傻了(下)
本系列是 我TM人傻了 系列第五期[捂脸],往期精彩回顾: 升级到Spring 5.3.x之后,GC次数急剧增加,我TM人傻了 这个大表走索引字段查询的 SQL 怎么就成全扫描了,我TM人傻了 获取异 ...