鸿蒙应用开发笔记[2]-简单界面布局
摘要
在HarmonyOS4开发一个应用,在ArkTS的Stage开发范式下简单进行界面布局.
平台信息
- DevEco Studio 4.0 Release 构建版本:4.0.0.600, built on October 17, 2023
- HarmonyOS 4
- Compile SDK “3.1.0(API 9)”
原理简介
ArtTS的Stage开发框架
- AppScope > app.json5:应用的全局配置信息。
- entry:HarmonyOS工程模块,编译构建生成一个HAP包。
- src > main > ets:用于存放ArkTS源码。
- src > main > ets > entryability:应用/服务的入口。
- src > main > ets > pages:应用/服务包含的页面。
- src > main > resources:用于存放应用/服务所用到的资源文件,如图形、多媒体、字符串、布局文件等。关于资源文件,详见资源分类与访问。
- src > main > module.json5:Stage模型模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明,详见module.json5配置文件。
- build-profile.json5:当前的模块信息、编译信息配置项,包括buildOption、targets配置等。其中targets中可配置当前运行环境,默认为HarmonyOS。
- hvigorfile.ts:模块级编译构建任务脚本,开发者可以自定义相关任务和代码实现。
- oh_modules:用于存放三方库依赖信息。关于原npm工程适配ohpm操作,请参考历史工程迁移。
- build-profile.json5:应用级配置信息,包括签名、产品配置等。
- hvigorfile.ts:应用级编译构建任务脚本。
界面布局方式
[https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/arkts-layout-development-overview-0000001450866508-V3]
声明式UI提供了以下8种常见布局,开发者可根据实际应用场景选择合适的布局进行页面开发。
布局类型 | 描述 | 使用场景 |
---|---|---|
线性布局(Row、Column) | 子元素超过1个且能线性排列时优先考虑此布局 | 需要线性排列的布局场景 |
层叠布局(Stack) | 组件需要堆叠效果时优先考虑此布局,不影响其他子组件布局空间 | 需要组件堆叠效果的场景,如弹出Panel覆盖其他组件 |
弹性布局(Flex) | 子组件需要计算拉伸或压缩比例时优先使用此布局,实现更好的视觉填充效果 | 需要子组件拉伸或压缩的场景 |
相对布局(RelativeContainer) | 二维空间中的自由布局方式,通过设置锚点规则对齐子组件位置 | 页面元素分布复杂或需要避免深层嵌套的场景 |
栅格布局(GridRow、GridCol) | 将空间分割为有规律的栅格,实现不同设备下的不同布局,降低适配成本 | 手机、大屏、平板等不同设备上的多场景布局需求 |
媒体查询(@ohos.mediaquery) | 根据不同设备类型或状态修改应用样式,屏幕动态改变时更新页面布局 | 需要根据设备和应用属性信息设计不同布局的场景 |
列表(List) | 显示结构化、可滚动的信息,具有垂直和水平布局能力和自适应排列个数的布局能力 | 用于呈现同类数据类型或数据类型集的场景,如图片和文本列表 |
网格(Grid) | 具有页面均分能力、子组件占比控制能力,是一种重要的自适应布局方式 | 需要按照固定比例或均匀分配空间的布局场景,如计算器、相册、日历等 |
轮播(Swiper) | 实现广告轮播、图片预览、可滚动应用等功能的组件 | 广告轮播、图片预览等需要滚动的场景 |
实现
主要代码
Index.ets
默认页面固定为Index.ets
,不能修改名称.
@Entry
@Component
struct Index {
// 智能体问候消息
@State agent_greet_message: string = "晚上好!天气转凉,出门记得添衣哦😊";
// 天气
@State weather_message: string = "乌鲁木齐 -1℃ 雨夹雪";
// 宿舍环境信息
@State room1_env_message: string = "宿舍 20.1℃ 湿度:40% 亮度:1000 Lux";
// 走廊环境信息
@State room2_env_message: string = "走廊 18.0℃ 湿度:42% 亮度:680 Lux";
// 课室环境信息
@State room3_env_message: string = "课室 18.2℃ 湿度:39% 亮度:100 Lux";
// 实验室环境信息
@State room4_env_message: string = "实验室 18.0℃ 湿度:20% 亮度:101 Lux";
// 声明式页面布局
build() {
Flex({ wrap: FlexWrap.Wrap }) {
// start 智能助手容器,内部竖向排列
Column({ space: 4 }) {
// 智能体问候
Text(this.agent_greet_message)
.fontSize(8)
.fontWeight(FontWeight.Bold)
.padding(25)
// TODO: 语音识别图标及声音波形
}
.width('46%')
.border({
radius: {
topLeft: $r('app.float.default_24'),
topRight: $r('app.float.default_24'),
bottomLeft:$r('app.float.default_24'),
bottomRight:$r('app.float.default_24')
}
})
.backgroundColor("#fff")
.margin({left:10}) // 外边距
.padding({top:10,bottom:10})// 内边距
// end 智能助手容器
// start 环境信息容器,内部竖向排列
Column({ space: 4 }) {
// 标题:环境
Text("环境")
.fontSize(16)
.fontWeight(FontWeight.Bolder)
// 室外天气
Text(this.weather_message)
.fontSize(8)
.fontWeight(FontWeight.Bold)
// 宿舍环境信息
Text(this.room1_env_message)
.fontSize(8)
.fontWeight(FontWeight.Bold)
// 走廊环境信息
Text(this.room2_env_message)
.fontSize(8)
.fontWeight(FontWeight.Bold)
// 课室环境信息
Text(this.room3_env_message)
.fontSize(8)
.fontWeight(FontWeight.Bold)
// 实验室环境信息
Text(this.room4_env_message)
.fontSize(8)
.fontWeight(FontWeight.Bold)
}
.width('46%')
.border({
radius: {
topLeft: $r('app.float.default_24'),
topRight: $r('app.float.default_24'),
bottomLeft:$r('app.float.default_24'),
bottomRight:$r('app.float.default_24')
}
})
.backgroundColor("#fff")
.margin({left:10}) // 外边距
.padding({top:10,bottom:10}) // 内边距
// end 环境信息容器
// start 灯光控制容器
Column({ space: 4 }) {
// 标题
Text("灯光")
.fontSize(16)
.fontWeight(FontWeight.Bolder)
// 落地灯按钮
Row() {
Text("落地灯")
.height(50)
.padding({left: 10})
.fontSize(8)
.textAlign(TextAlign.Start)
.backgroundColor(0xFFFFFF)
.fontWeight(FontWeight.Bold)
Toggle({ type: ToggleType.Switch })
.padding({right: 10}) // 外边距
.onChange((isOn: boolean) => {
if(isOn) {
promptAction.showToast({ message: '落地灯已打开' })
} else {
promptAction.showToast({ message: '落地灯已关闭' })
}
})// end onChange
}
.backgroundColor(0xFFFFFF)
}
.width('46%')
.border({
radius: {
topLeft: $r('app.float.default_24'),
topRight: $r('app.float.default_24'),
bottomLeft:$r('app.float.default_24'),
bottomRight:$r('app.float.default_24')
}
})
.backgroundColor("#fff")
.margin({left:10}) // 外边距
.padding({top:10,bottom:10}) // 内边距
// end 灯光控制容器
// start 风扇控制容器
Column({ space: 4 }) {
// 标题
Text("风扇")
.fontSize(16)
.fontWeight(FontWeight.Bolder)
// 落地灯按钮
Row() {
Text("空气净化器")
.height(50)
.padding({left: 10})
.fontSize(8)
.textAlign(TextAlign.Start)
.backgroundColor(0xFFFFFF)
.fontWeight(FontWeight.Bold)
Toggle({ type: ToggleType.Switch })
.padding({right: 10}) // 外边距
.onChange((isOn: boolean) => {
if(isOn) {
promptAction.showToast({ message: '空气净化器已打开' })
} else {
promptAction.showToast({ message: '空气净化器已关闭' })
}
})// end onChange
}
.backgroundColor(0xFFFFFF)
}
.width('46%')
.border({
radius: {
topLeft: $r('app.float.default_24'),
topRight: $r('app.float.default_24'),
bottomLeft:$r('app.float.default_24'),
bottomRight:$r('app.float.default_24')
}
})
.backgroundColor("#fff")
.margin({left:10,top:10}) // 外边距
.padding({top:10,bottom:10}) // 内边距
// end风扇控制容器
}// end Flex
.width('100%')
.height('100%')
.padding({ top: 10, bottom: 10 })// 内边距
.backgroundColor("#eef")
}// end build
更换应用名称和图标:
modules.json5
{
"module": {
"name": "entry",
"type": "entry",
"description": "$string:module_desc",
"mainElement": "EntryAbility",
"deviceTypes": [
"phone",
"tablet"
],
"deliveryWithInstall": true,
"installationFree": false,
"pages": "$profile:main_pages",
"abilities": [
{
"name": "EntryAbility",
"srcEntry": "./ets/entryability/EntryAbility.ts",
"description": "$string:EntryAbility_desc",
"icon": "$media:weekend_panel_logo",
"label": "$string:app_name",
"startWindowIcon": "$media:startIcon",
"startWindowBackground": "$color:start_window_background",
"exported": true,
"skills": [
{
"entities": [
"entity.system.home"
],
"actions": [
"action.system.home"
]
}
]
}
]
}
}
更改icon
和label
,具体值可以直接定义或者引用resources文件夹中的内容(参考Android开发).
效果
分类:
鸿蒙开发
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」