codecamp

鸿蒙OS 组件与布局开发说明

HarmonyOS 提供了 Ability 和 AbilitySlice 两个基础类。有界面的 Ability 绑定了系统的 Window 进行 UI 展示,且具有 生命周期。AbilitySlice 主要用于承载 Ability 的具体逻辑实现和界面 UI,是应用显示、运行和跳转的最小单元。 AbilitySlice 通过 setUIContent() 为界面设置布局。

接口声明 接口描述
setUIContent(ComponentContainer root) 设置界面入口,root 为界面组件树根节点。

组件需要进行组合,并添加到界面的布局中。在Java UI 框架中,提供了两种编写布局的方式:

  • 在代码中创建布局:用代码创建 Component 和 ComponentContainer 对象,为这些对象设置合适的布局参数和属性值,并将 Component 添加到 ComponentContainer 中,从而创建出完整界面。
  • 在 XML 中声明 UI 布局:按层级结构来描述 Component 和 ComponentContainer 的关系,给组件节点设定合适的布局参数和属性值,代码中可直接加载生成此布局。

这两种方式创建出的布局没有本质差别,在 XML 中声明布局,在加载后同样可在代码中对该布局进行修改。

组件分类

根据组件的功能,可以将组件分为布局类、显示类、交互类三类:

组件类别 组件名称 功能描述
布局类 PositionLayout、DirectionalLayout、StackLayout、DependentLayout、TableLayout、AdaptiveBoxLayout 提供了不同布局规范的组件容器,例如以单一方向排列的 DirectionalLayout、以相对位置排列的 DependentLayout、以确切位置排列的 PositionLayout 等。
显示类 Text、Image、Clock、TickTimer、ProgressBar 提供了单纯的内容显示,例如用于文本显示的 Text,用于图像显示的 Image 等。
交互类 TextField、Button、Checkbox、RadioButton/RadioContainer、Switch、ToggleButton、Slider、Rating、ScrollView、TabList、ListContainer、PageSlider、PageFlipper、PageSliderIndicator、Picker、TimePicker、DatePicker、SurfaceProvider、ComponentProvider 提供了具体场景下与用户交互响应的功能,例如 Button 提供了点击响应功能,Slider 提供了进度选择功能等。

框架提供的组件使应用界面开发更加便利,这些组件的具体功能说明及属性设置详见API参考。

鸿蒙OS Java UI框架概述
鸿蒙OS 组件与布局代码创建布局
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

鸿蒙OS 开发

鸿蒙OS 术语

鸿蒙OS Java API参考

鸿蒙OS ohos.aafwk.ability

鸿蒙OS ohos.aafwk.abilityjet.activedata

鸿蒙OS ohos.aafwk.content

鸿蒙OS java.lang

鸿蒙OS java.Util

鸿蒙OS java.Util class

鸿蒙OS ohos.data.dataability

鸿蒙OS ohos.data.dataability class

鸿蒙OS ohos.agp.components

鸿蒙OS ohos.agp.components interface

鸿蒙OS ohos.agp.components class

鸿蒙OS ohos.global.configuration

鸿蒙OS java.io

鸿蒙OS ohos.data.resultset

鸿蒙OS ohos.data.resultset interface

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }