ArkUI 能力介绍ArkUI方舟 UI 框架为应用的 UI 开发提供了完整的基础设施包括简洁的 UI 语法、丰富的 UI 功能组件、布局、动画以及交互事件以及实时界面预览工具等可以支持开发者进行丰富页面的开发。以关键的应用 UI 开发底座为基石ArkUI 将语言、编译器、图形深度融合在开发模型层提供了 UI 开发范式的基础语言规范并提供内置的UI组件、布局和动画提供了多种状态管理机制为应用开发者提供一系列接口支持。在引擎层提供了兼容不同开发范式的 UI 渲染管线提供多种基础组件、布局计算、动效、交互事件提供了状态管理和绘制能力。提供了高效的绘制能力将渲染管线收集的渲染指令绘制到屏幕能力。在平台抽象层提供了针对不同操作系统渲染层的适配可抹平不同平台的接口差异实现 ArkUI 框架的多平台一致性。丰富的 UI 组件HarmonyOS Design UI 组件平滑自然的内置控件动画100组件和样式极简的 UI 语法声明式UI独立渲染能力ArkTS/C 混合开发提升 30 开发效率相机输入接入易用的 UI 一多能力实时开发预览多态控件Syscap 能力实时开发预览所见所得支持多种设备类型跨平台开发鸿蒙开发框架平台API 桥接原生渲染性能声明式 UI 范式声明式开发范式基于 ArkTS 的声明式开发范式的方舟开发框架是一套开发极简、高性能、支持跨设备的 UI 开发框架提供了构建 HarmonyOS 应用 UI 所必需的能力。声明式 UI 是系统选用的新一代开发范式通过数据驱动 UI 变化UI 逻辑分离更直观更高效。声明式语法能够助力开发人员将更多精力聚焦于业务逻辑减少对细节实现的关注进而提升编码效率和代码可读性。命令式开发范式开发者需要手动编写 UI 渲染的每一个细节包括创建、修改和删除操作UI 状态和操作逻辑通常混杂在一起。代码量较大且易出错但可以精确控制 UI 渲染的每个细节。适合面向框架性的应用。DirectionalLayout .. Text … ohos:textHello World/ /DirectionalLayout //Imperative style View b findViewById(title) b.setOnClickListener(() { b.setColor(#f1f511) });基于 ArkTS 的声明式开发范式开发者只需描述 UI 的最终状态而不关注具体的渲染过程。框架负责处理 UI 的创建、更新和删除等细节。适合面向业务型的应用。代码中直接描述 UI 的结构与状态或数据的关系较为隐式。Column({ space: 20 }) { Text(其它登录方式) .fontSize(16) .fontColor(this.myColor) Button(修改颜色).onClick(() { this.myColor #f1f511 }) }常用组件介绍ArkUI 提供了超过 100 种基础组件与样式并且新增了场景化组件有效降低了复杂场景下的开发难度。对于常用组件可以简单分为以下三种基础组件 用于展示页面的基础元素例如 Button、Text、Image 等。布局容器组件用于界面上组织组件的排列例如 Row、Column、List、Grid、WaterFlow、Swiper 等。导航组件用于实现页面跳转或切换例如 Navigation、Tabs。基础组件Button 通常用于响应用户的点击操作其类型包括胶囊按钮、圆形按钮和普通按钮。当 Button 作为容器使用时可以通过添加子组件的方式实现包含文字或者图片等元素的按钮。Text 是文本组件常用于在用户视图中展示内容。它提供两种文字加载模式一种是直接加载文本只需要在 Text 组件内设置文本字符串即可另一种是采用资源方式加载不过这种方式需要在代码过程中预先配置好资源。Image 组件可以实现在用户视图中展示图片支持 jpg、png、bmp、svg、gif 等多种图片格式可以用来丰富应用界面。布局容器组件线性布局是开发中最常用的布局方式通过线性容器 Row 和 Column 构建其子元素在线性方向上依次排列。Row 容器内子组件按照水平方向排列Column 容器内子组件按照垂直方向排列。Grid 网格是由行和列分割而成的单元格组成通过指定项目所在的单元格实现各种布局具有较强的页面均分和子组件占比控制的能力是一种重要的自适应布局。WaterFlow 容器同样由行和列分割的单元格组成通过自身的排列规则可以将大小不同的项目自上而下如瀑布般紧密布局。List 是一种复杂容器当列表项达到一定数量且内容超过屏幕大小时会自动提供滚动功能适用于呈现同类数据类型或者数据类型集合。Swiper 组件具备滑动轮播显示能力它本身是一个容器组件当设置多个子组件后可以对这些子元素进行轮播展示。导航组件Navigation 是路由容器组件主要包含导航页和子页。导航页由标题栏和工具栏组成其中导航页可以通过 hideNavBar 属性隐藏。它不存在于页面栈中导航页与子页以及子页之间可以通过路由操作切换。Tabs 组件的页面由 TabContent 和 TabBar 两部分组成。TabContent 是内容页TabBar 是导航页签栏根据不同导航类型布局有所不同可以分为底部导航、顶部导航、侧边导航相应的导航栏分别位于底部、顶部、侧边。更多组件除上述组件外还有其他常用组件。例如 PatternLock 组件以九宫格图案方式输入密码适用于密码验证场景。Slider 滑动条组件用于快速调节设置值如音量调节、亮度调节等应用场景。以及 CustomDialog 自定义弹窗组件。ArkUI 还提供了一系列弹窗选择器组件这些组件具备滑动或者下拉效果能为用户提供选择常用于选择日期、时间、地点等场景。例如 CalenderPicker 日历选择器组件提供下拉日历弹窗方便用户选择时间。TextPicker 提供可滑动选择文本内容DatePicker 用于根据指定日期范围创建日期滑动选择器TimePicker 则根据指定参数创建时间选择器。更多功能介绍ArkUI 基于 XComponent 组件实现 ArkTS/C 的混合开发能力支撑重载场景下的高性能开发高负载渲染能力采用 C 构建动态库应用逻辑采用 ArkTS 编码。面对多设备布局页面差异问题ArkUI 提供了自适应布局和响应式布局以此实现一套代码适配多个设备的布局效果。同时由于不同设备的交互方式存在差异如用户在 PC/2in1 设备上主要使用键盘、鼠标交互在手机和平板上主要使用触摸交互ArkUI 提供了交互归一事件以及组件交互归一方式屏蔽设备差异统一交互逻辑。ArkUI 与 Deveco Studio 配合提供了实时预览功能真正实现所见即所得。预览器效果与目标设备的 UI 呈现效果一致并且在编辑过程中同步更新UI 界面与代码可以双向预览实时查看和编辑组件属性。除此之外还提供组件级预览和多设备预览全方位帮助开发者实现预览功能。
