codecamp

鸿蒙OS Java UI框架概述

应用的 Ability 在屏幕上将显示一个用户界面,该界面用来显示所有可被用户查看和交互的内容。应用中所有的用户界面元素都是由 Component 和 ComponentContainer 对象构成。Component 是绘制在屏幕上的一个对象,用户能与之交互。ComponentContainer 是一个用于容纳其他 Component 和 ComponentContainer 对象的容器。

Java UI 框架提供了一部分 Component 和 ComponentContainer 的具体子类,即创建用户界面(UI)的各类组件,包括一些常用的组件(比如:文本、按钮、图片、列表等)和常用的布局(比如:DirectionalLayout 和 DependentLayout)。用户可通过组件进行交互操作,并获得响应。所有的UI操作都应该在主线程进行设置。

组件和布局

用户界面元素统称为组件,组件根据一定的层级结构进行组合形成布局。组件在未被添加到布局中时,既无法显示也无法交互,因此一个用户界面至少包含一个布局。在UI框架中,具体的布局类通常以 XXLayout 命名,完整的用户界面是一个布局,用户界面中的一部分也可以是一个布局。布局中容纳 Component 与 ComponentContainer 对象。

Component 和 ComponentContainer

  • Component:提供内容显示,是界面中所有组件的基类,开发者可以给 Component 设置事件处理回调来创建一个可交互的组件。Java UI 框架提供了一些常用的界面元素,也可称之为组件,组件一般直接继承 Component 或它的子类,如 Text、Image 等。
  • ComponentContainer:作为容器容纳 Component 或 ComponentContainer 对象,并对它们进行布局。Java UI 框架提供了一些标准布局功能的容器,它们继承自 ComponentContainer,一般以“Layout”结尾,如 DirectionalLayout、DependentLayout 等。

图1 Component结构

img

LayoutConfig

每种布局都根据自身特点提供 LayoutConfig 供子 Component 设定布局属性和参数,通过指定布局属性可以对子 Component 在布局中的显示效果进行约束。例如:“width”、“height”是最基本的布局属性,它们指定了组件的大小。

图2 LayoutConfig

点击放大

组件树

布局把 Component 和 ComponentContainer 以树状的层级结构进行组织,这样的一个布局就称为组件树。组件树的特点是仅有一个根组件,其他组件有且仅有一个父节点,组件之间的关系受到父节点的规则约束。

鸿蒙OS 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; }