摘要
在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 = "晚上好!天气转凉,出门记得添衣哦
标签：24,10,界面,鸿蒙,default,app,float,笔记,message
From： https://www.cnblogs.com/qsbye/p/17873453.html