12 2024 档案
摘要：1 概 述 事件是人机交互的基础，鸿蒙开发中，事件分为两大类：a）通用事件；b）手势事件。 👉🏻 通用事件 通用事件又可以按照触发类型来分类，分为三大类：触屏事件、键鼠事件和焦点事件。 触屏事件：手指或手写笔在触屏上的单指或单笔操作。 键鼠事件：包括外设鼠标或触控板的操作事件和外设键盘的按键事件
阅读全文
摘要：01 概 述 两个页面间发生跳转，一个页面消失，另一个页面出现，这时可以配置各自页面的页面转场参数实现自定义的页面转场效果。 页面转场效果写在pageTransition()函数中，通过PageTransitionEnter和PageTransitionExit指定页面进入和退出的动画效果。 02
阅读全文
摘要：1 概 述 在不同页面间，有使用相同的元素（例如有同一幅图）的场景，可以使用共享元素转场动画衔接。 为了突出不同页面间相同元素的关联性，可为它们添加共享元素转场动画。如果相同元素在不同页面间的大小有明显差异，即可达到放大缩小视图的效果。 例如：有两个页面，A页面只展示一张图片，当我们在A页面点击图片
阅读全文
摘要：1、概述 ArkUI提供了预置动画曲线函数（指定了动画属性从起始值到终止值的变化规律）如Linear、Ease、EaseIn等。 另外，ArkUI也提供了由弹簧振子物理模型产生的弹簧曲线。通过弹簧曲线，开发者可以设置超过设置的终止值，在终止值附近震荡，直至最终停下来的效果。弹簧曲线的动画效果比其他曲
阅读全文
摘要：我们接着鸿蒙动画开发01——布局更新动画，现在了解鸿蒙的组件内部的转场动画。 1、概述 组件的插入、删除过程即为组件本身的转场过程，组件的插入、删除动画称为组件内转场动画。通过组件内转场动画，可定义组件出现、消失的效果。 2、关键接口 组件内转场动画的接口为： transition(value: T
阅读全文
摘要：1、概述 从现在起，我们将开启一个新系列——鸿蒙动画开发系列，在这个系列中，我们将分别接触鸿蒙的各种动画效果。在开始之前，我们先对动画做一个简单的介绍。 1.1、什么是动画 动画的原理是在一个时间段内，多次改变UI外观，由于人眼会产生视觉暂留，所以最终看到的就是一个“连续”的动画。 UI的一次改变称
阅读全文
摘要：概 述 前一章我们学习了Shape绘制来绘制自定义形状(鸿蒙UI系统组件14——几何图形(Shape))，在实际的业务开发中，有可能我们需要绘制更复杂的图形，例如统计图中的饼图、折线图等，除了绘制图形外，可能还会绘制一些复杂的组件效果，此时，我们就需要用到画布(Canvas)组件来满足我们的需求了。
阅读全文
摘要：1、概述 上篇文章中，我们讨论了在鸿蒙系统中如何显示一张图片，鸿蒙UI系统组件13——图片显示(Image)，在鸿蒙开发中，除了使用静态图片展示外，我们还可以自己使用代码画一些几何图形，例如：三角形、矩形、圆形、多边形等。此时，我们就需要用到Shape组件来完成我们的需求。 2、创建绘制组件 绘制组
阅读全文
摘要：1、概述 开发者经常需要在应用中显示一些图片，例如：按钮中的icon、网络图片、本地图片等。在应用中显示图片需要使用Image组件实现，Image支持多种图片格式，包括png、jpg、bmp、svg和gif。 Image通过调用接口来创建，接口调用形式如下： Image(src: string |
阅读全文
摘要：1、概述 实际的APP开发中，几乎都会遇到有多个页面跳转的情况，例如，登录 -> 首页 -> 个人中心。在鸿蒙开发中，页面间的跳转被称作为“页面路由”。 HarmonyOS提供了Router模块，通过不同的url地址，可以方便地进行页面路由，轻松地访问不同的页面。 本文将从页面跳转、页面返回和页面返
阅读全文
摘要：1、概述 当页面信息较多时，为了让用户能够聚焦于当前显示的内容，需要对页面内容进行分类，提高页面空间利用率。Tabs组件可以在一个页面内快速实现视图内容的切换，一方面提升查找信息的效率，另一方面精简用户单次获取到的信息量。 2、基本布局 Tabs组件的页面组成包含两个部分，分别是TabContent
阅读全文
摘要：Menu是菜单接口，一般用于鼠标右键弹窗、点击弹窗等。 1、创建默认样式的菜单 菜单需要调用bindMenu接口来实现。bindMenu响应绑定组件的点击事件，绑定组件后手势点击对应组件后即可弹出。 Button('click for Menu') .bindMenu([ { value: 'Men
阅读全文
摘要：1、概述 Popup属性可绑定在组件上显示气泡弹窗提示，设置弹窗内容、交互逻辑和显示状态。主要用于屏幕录制、信息弹出提醒等显示状态。 气泡分为两种类型，一种是系统提供的气泡PopupOptions，一种是开发者可以自定义的气泡CustomPopupOptions。其中PopupOptions为系统提
阅读全文
摘要：1、概述 自定义弹窗（CustomDialog）可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗。 2、创建自定义弹窗 使用@CustomDialog装饰器装饰自定义弹窗。 @CustomDialog装饰器用于装饰自定义
阅读全文
摘要：1、概述 Video组件用于播放视频文件并控制其播放状态，常用于为短视频应用和应用内部视频的列表页面。当视频完整出现时会自动播放，用户点击视频区域则会暂停播放，同时显示播放进度条，通过拖动播放进度条指定视频播放到具体位置。 Video组件已经封装好了视频播放的基础能力，开发者无需进行视频实例的创建，
阅读全文
摘要：1、概述 Progress是进度条显示组件，显示内容通常为某次目标操作的当前进度。 2、创建进度条 Progress通过调用接口来创建，接口调用形式如下： Progress(options: {value: number, total?: number, type?: ProgressType})
阅读全文
摘要：1、概述 Toggle组件提供状态按钮样式，勾选框样式及开关样式，一般用于两种状态之间的切换。 2、创建切换按钮 Toggle通过调用接口来创建，接口调用形式如下： Toggle(options: { type: ToggleType, isOn?: boolean }) 该接口用于创建切换按钮，其
阅读全文
摘要：1、概述 Radio是单选框组件，通常用于提供相应的用户交互选择项，同一组的Radio中只有一个可以被选中。 2、创建单选框 Radio通过调用接口来创建，接口调用形式如下： Radio(options: {value: string, group: string}) 该接口用于创建一个单选框，其中
阅读全文
摘要：1、概述 TextInput、TextArea是输入框组件，通常用于响应用户的输入操作，比如评论区的输入、聊天框的输入、表格的输入等，也可以结合其它组件构建功能页面，例如登录注册页面。 2、创建输入框 TextInput为单行输入框、TextArea为多行输入框。通过以下接口来创建。 TextAre
阅读全文
摘要：1、概述 Button是按钮组件，通常用于响应用户的点击操作，其类型包括胶囊按钮、圆形按钮、普通按钮。Button当做为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。 2、创建按钮 Button通过调用接口来创建，接口调用有以下两种形式： 创建不包含子组件的按钮。 Button(lab
阅读全文
摘要：如果你也对鸿蒙开发感兴趣，加入“Harmony自习室”吧！点击下面的名片关注公众号。 1、概述 Text是文本组件，是我们开发UI界面中最常见的组件之一，通常用于展示用户的视图，如显示文章的文字。下面将对文本组件展开介绍。 2、创建文本 Text可通过以下两种方式来创建： string字符串 Tex
阅读全文
摘要：1、概述 Swiper组件提供滑动轮播显示的能力。Swiper本身是一个容器组件，当设置了多个子组件后，可以对这些子组件进行轮播显示。通常，在一些应用首页显示推荐的内容时，需要用到轮播显示的能力。 2、布局与约束 Swiper作为一个容器组件，在自身尺寸属性未被设置时，会自动根据子组件的大小设置自身
阅读全文
摘要：1、概述 网格布局是由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。网格布局具有较强的页面均分能力，子组件占比控制能力，是一种重要自适应布局，其使用场景有九宫格图片展示、日历、计算器等。 ArkUI提供了Grid容器组件和子组件GridItem，用于构建网格布局。
阅读全文
摘要：1、概述 列表是一种复杂的容器，当列表项达到一定数量，内容超过屏幕大小时，可以自动提供滚动功能。它适合用于呈现同类数据类型或数据类型集，例如图片和文本。在列表中显示数据集合是许多应用程序中的常见要求（如通讯录、音乐列表、购物清单等）。 使用列表可以轻松高效地显示结构化、可滚动的信息。通过在List组
阅读全文
摘要：1、概述 栅格布局是一种通用的辅助定位工具，对移动设备的界面设计有较好的借鉴作用。主要优势包括： 提供可循的规律：栅格布局可以为布局提供规律性的结构，解决多尺寸多设备的动态布局问题。通过将页面划分为等宽的列数和行数，可以方便地对页面元素进行定位和排版。 统一的定位标注：栅格布局可以为系统提供一种统一
阅读全文
摘要：1、相对布局 👉🏻 1.1、概述 RelativeContainer为采用相对布局的容器，支持容器内部的子元素设置相对位置关系。子元素支持指定兄弟元素作为锚点，也支持指定父容器作为锚点，基于锚点做相对位置布局。下图是一个RelativeContainer的概念图，图中的虚线表示位置的依赖关系。
阅读全文
摘要：1、概述 叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠，容器中的子元素（子组件）依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。 层叠布局具有较强的页面层叠、位置定位
阅读全文
摘要：1、概述 弹性布局（Flex）提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。容器默认存在主轴与交叉轴，子元素默认沿主轴排列，子元素在主轴方向的尺寸称为主轴尺寸，在交叉轴方向的尺寸称为交叉轴尺寸。弹性布局在开发场景中用例特别多，比如页面头部导航栏的均匀分布、页面框架的搭建、多行数据的
阅读全文
摘要：1、概述 布局指用特定的组件或者属性来管理用户页面所放置UI组件的大小和位置。组件按照布局的要求依次排列，构成应用的页面。 在声明式UI中，所有的页面都是由自定义组件构成，开发者可以根据自己的需求，选择合适的布局进行页面开发。 一个页面开发中，最优先的就是确定UI的布局结构，布局的结构通常是分层级的
阅读全文
摘要：1、前言 接下里我们将开启“鸿蒙UI布局系列”的学习，第一站：学习线性布局（Row/Column）+ 弹性布局（Flex） 在展开学习前，先上一个实战demo——开发一个个人中心页面，示意图如下： 其中需要关注的重点知识有： 如何实现图标按钮左对齐； 如何实现一个渐变色的圆形头像站位图； “关于我们
阅读全文
摘要：1、前言 在声明式描述语句中开发者除了使用系统组件外，还可以使用渲染控制语句来辅助UI的构建，这些渲染控制语句包括控制组件是否显示的条件渲染语句，基于数组数据快速生成组件的循环渲染语句。 2、条件渲染 假设我们存在这样一个应用场景：当我们的界面在满足某种条件时，需要显示一些组件，在不满足某些条件时，
阅读全文
摘要：1、前言 经过我们前面10章的学习，我们基本上可以开发出一个简单的APP了，为了巩固学习的内容，我们先开发一个计算器APP来连个手（文末有源代码），界面如下： 包含基本的计算器运算功能 支持一键清空，支持逐个删除数字 支持将上次计算的过程保存下来，下次打开app继续； 支持清理之前保存的记录 这里面
阅读全文
摘要：1、前言 我们在鸿蒙UI开发快速入门 —— part09: 应用级状态管理LocalStorage & AppStorage中已经学习了LocalStorage与AppStorage，但他们都是运行时的内存，在APP退出后所有数据将丢失。 如果我们想将一部分状态数据保存下来，让用户在下次进入app时
阅读全文
摘要：1、说在前面的话 前面几个章节中介绍的装饰器(@State、@Props、@Link、@Provide、@Consume、@Observed、@ObjectLink)仅能在页面内，即一个组件树上共享状态变量。 如果开发者要实现应用级的，或者多个页面的状态数据共享，就需要用到应用级别的状态管理的概念。
阅读全文
摘要：1、说在前面的话 在此之前，我们已经先后学习了三个装饰器：@State、@Props、@Link，它们的功能和使用场景分别是什么？暂停会议一下。 我们目前已经可以处理组件内状态(@State)，也可以处理父组件向子组件传递状态(@Props)，还可以处理父组件与子组件共用状态(@Link)。 我们再
阅读全文
摘要：1、前言 我们在上一章学习了@State装饰器，@State装饰器的作用范围仅仅在当前组件，接下来，我们讨论如何从父组件中传入参数到子组件，让子组件随着父组件的状态发生变化。本章将要介绍的就是：@Props装饰器。 2、@Props装饰器 @Prop装饰的变量可以和父组件建立单向的同步关系。@Pro
阅读全文
摘要：1、说在前面的话 在前五个章节中，我们构建的页面基本都是静态的页面，如果希望构建一个动态的、有交互的界面，就需要引入“状态”的概念，以便随着用户的交互，界面随着发生变化，例如如下的动图： 上面的示例中，用户与应用程序的交互触发了文本状态变更，状态变更引起了UI渲染，UI从“Hello World”变
阅读全文
摘要：1、 为什么要样式复用？ 如果每个组件的样式都需要单独设置，在开发过程中会出现大量代码在进行重复样式设置，虽然可以复制粘贴，但为了代码简洁性和后续方便维护，样式的复用就很有必要了。 为此，鸿蒙推出了可以提炼公共样式进行复用的装饰器@Styles； 2、@Styles装饰器 @Styles装饰器可以将
阅读全文
摘要：1、为什么要复用？ 从鸿蒙UI开发快速入门 —— part02: 组件开发文章中我们学习到，build()函数是我们构建用户UI界面的入口函数，在该函数中完成UI样式定义以及事件定义。 实际的项目开发中，一个组件的UI可能是相对比较复杂的（代码量比较多），如果把所有的UI描述代码都写在build()
阅读全文
摘要：1. 什么是组件的生命周期 组件的生命周期是我们开发一个组件必须要关注的内容，组件的生命周期，指的是组件的创建、渲染、销毁等过程。因为这个过程就类似于人从出生到离世的过程，从而称为：组件的生命周期。 只有了解了组件的生命周期，我们才能开发出一个流畅的用户界面。 2. 页面 & 组件 还记得我们 “h
阅读全文
摘要：1. 组件基本介绍 在ArkUI中，UI显示的内容均为组件，由框架直接提供的称为系统组件，由开发者定义的称为自定义组件。在进行 UI 界面开发时，通常不是简单的将系统组件进行组合使用，而是需要考虑代码可复用性、业务逻辑与UI分离，后续版本演进等因素。因此，将UI和部分业务逻辑封装成自定义组件是不可或
阅读全文
摘要：1. 背景 在鸿蒙开发中，ArkTS是优选的主力应用开发语言。 ArkTS围绕应用开发在TypeScript（简称TS）生态基础上做了进一步扩展，继承了TS的所有特性，是TS的超集。 因此，在学习ArkTS语言之前，建议开发者具备TS语言开发能力，本文的假设前提为，读者拥有TS编程经验。 2. 综述
阅读全文
摘要：1. 前言 鸿蒙是一款由华为推出的全生态操作系统（探索 | 华为开发者联盟），最近几年发展势头非常强劲，现在开始，让我们来一起认识他吧。 本文针对鸿蒙基本的开发内容做一次概览性的串联。 咱们学习一款新的开发平台，一般先关注两个事情：a）开发工具；b）开发语言。 2. 开发工具与开发语言 开发工具 鸿
阅读全文
浙公网安备 33010602011771号