codecamp

鸿蒙OS 绘制布局图

一个页面的基本元素包含标题区域、文本区域、图片区域等，每个基本元素内还可以包含多个子元素，开发者根据需求还可以添加按钮、开关、进度条等组件。在构建页面布局时，需要对每个基本元素思考以下几个问题：

  • 该元素的尺寸和排列位置
  • 是否有重叠的元素
  • 是否需要设置对齐、内间距或者边界
  • 是否包含子元素及其排列位置
  • 是否需要容器组件及其类型

将页面中的元素分解之后再对每个基本元素按顺序实现，可以减少多层嵌套造成的视觉混乱和逻辑混乱，提高代码的可读性，方便对页面做后续的调整。以下图为例进行分解：

图1 页面布局分解

点击放大

图2 留言区布局分解

点击放大

鸿蒙OS 布局说明
鸿蒙OS 添加标题行和文本区域
温馨提示
下载编程狮App，免费阅读超1000+编程语言教程
取消
确定
目录

鸿蒙OS 入门

鸿蒙OS 概述

鸿蒙OS 开发基础知识

鸿蒙OS 快速入门

鸿蒙OS 开发

鸿蒙OS Ability

鸿蒙OS Ability

鸿蒙OS 分布式任务调度

鸿蒙OS 公共事件与通知

鸿蒙OS 剪贴板

鸿蒙OS 线程

鸿蒙OS UI

鸿蒙OS Java UI框架

鸿蒙OS JS UI框架

鸿蒙OS 多模输入

鸿蒙OS 媒体

鸿蒙OS 视频

鸿蒙OS 图像

鸿蒙OS 相机

鸿蒙OS 音频

鸿蒙OS 媒体会话管理

鸿蒙OS 媒体数据管理

鸿蒙OS 安全

鸿蒙OS AI

鸿蒙OS 网络与连接

鸿蒙OS NFC

鸿蒙OS 蓝牙

鸿蒙OS WLAN

鸿蒙OS 网络管理

鸿蒙OS 电话服务

鸿蒙OS 设备管理

鸿蒙OS 数据管理

鸿蒙OS 对象关系映射数据库

鸿蒙OS 轻量级偏好数据库

鸿蒙OS 分布式数据服务

鸿蒙OS 分布式文件服务

鸿蒙OS 融合搜索

鸿蒙OS 数据存储管理

鸿蒙OS 设备

鸿蒙OS 车机

鸿蒙OS 智能穿戴

鸿蒙OS 智慧屏

鸿蒙OS 工具

鸿蒙OS HUAWEI DevEco Studio使用指南

鸿蒙OS 工程管理

鸿蒙OS 代码编辑

鸿蒙OS 编译构建

鸿蒙OS 应用运行

鸿蒙OS 应用调试

鸿蒙OS 应用发布

鸿蒙OS 术语

鸿蒙OS 常见问题

鸿蒙OS Java API参考

鸿蒙OS 方舟注释

鸿蒙OS 方舟系统

鸿蒙OS ohos.aafwk.ability

鸿蒙OS ohos.aafwk.ability interface

鸿蒙OS ohos.aafwk.ability class

鸿蒙OS ohos.aafwk.ability enum

鸿蒙OS ohos.aafwk.ability exception

鸿蒙OS ohos.aafwk.ability.delegation

鸿蒙OS ohos.Utils.net

鸿蒙OS ohos.aafwk.abilityjet.activedata

鸿蒙OS ohos.aafwk.content

鸿蒙OS ohos.app

鸿蒙OS ohos.bundle

鸿蒙OS ohos.bundle interface

鸿蒙OS ohos.bundle class

鸿蒙OS ohos.bundle enum

鸿蒙OS ohos.rpc

鸿蒙OS java.lang

鸿蒙OS java.lang interface

鸿蒙OS java.lang class

鸿蒙OS java.lang enum

鸿蒙OS java.lang exception

鸿蒙OS java.lang error

鸿蒙OS java.lang annotation

鸿蒙OS java.net

鸿蒙OS java.net Interface

鸿蒙OS java.net Class

鸿蒙OS java.Util

鸿蒙OS java.Util interface

鸿蒙OS java.Util class

鸿蒙OS ohos.data.rdb

鸿蒙OS ohos.utils

鸿蒙OS ohos.data.dataability

鸿蒙OS ohos.data.dataability class

鸿蒙OS ohos.accessibility

鸿蒙OS ohos.agp.components

鸿蒙OS ohos.agp.components interface

鸿蒙OS ohos.agp.components class

鸿蒙OS ohos.agp.transition

鸿蒙OS ohos.agp.window.service

鸿蒙OS ohos.event.notification

鸿蒙OS ohos.event.notification interface

鸿蒙OS ohos.event.notification class

鸿蒙OS ohos.global.configuration

鸿蒙OS ohos.multimodalinput.event

鸿蒙OS java.io

鸿蒙OS java.io interface

鸿蒙OS java.io class

鸿蒙OS java.io exception

鸿蒙OS ohos.global.resource

鸿蒙OS ohos.data.resultset

鸿蒙OS ohos.data.resultset interface

鸿蒙OS ohos.agp.utils

鸿蒙OS javax.sql

鸿蒙OS javax.sql class

附

关闭

 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; }