UI页面的构建不用再像Android开发过程中在.xml文件中书写,可直接在页面上使用声明式UI的方式按照布局进行排列,构建应用的页面。
如下代码使用Row、Column构建一个页面布局,在页面布局中添加组件Text、Button,共同构成页面:
import router from '@ohos.router'
import hilog from '@ohos.hilog'
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
// 添加按钮,以响应用户点击
Button('Next')
.fontSize(30)
.fontWeight(FontWeight.Bold)
.type(ButtonType.Capsule)
.margin({
top: 20
})
.width('40%')
.height('5%')
// 设置点击事件,进行跳转
.onClick(() => {
// 跳转到第二页
router.pushUrl({ url: 'pages/SecondPage' }).then(() => {
}).catch((err) => {
hilog.error(0x0000, "index", 'Failed to jump to the second page')
})
})
}
.width('100%')
}
.height('100%')
}
}
在实际开发的过程中,按照如下流程进行页面的布局:
- 确定页面的布局结构
- 分析页面中的元素组成
- 选用合适的布局容器组件或属性控制页面中各个元素的位置和大小进行约束
1.布局结构
布局的结构是分层级的,代表了用户界面中的整体架构。
如图所示:
2.布局元素的组成
布局相关的容器组件形成对应的布局效果,布局元素组成图:
可针对布局元素进行相应的设置,实现自定义的效果。
- 组件区域(蓝区方块):组件区域表明组件的大小,width、height属性设置该区域的大小。
- 组件内容区(黄色方块):组件区域大小减去组件的border值,组件内容区大小会作为组件内容(或者子组件)进行大小测算时的布局测算限制。
- 组件内容(绿色方块):组件内容本身占用的大小,比如文本内容占用的大小。组件内容和组件内容区不一定匹配,比如设置了固定的width和height,此时组件内容的大小就是设置的width和height减去padding和border值,但文本内容则是通过文本布局引擎测算后得到的大小,可能出现文本真实大小小于设置的组件内容区大小。当组件内容和组件内容区大小不一致时,align属性生效,定义组件内容在组件内容区的对齐方式,如居中对齐。
- 组件布局边界(虚线部分):组件通过margin属性设置外边距时,组件布局边界就是组件区域加上margin的大小。
3.如何选择布局
声明式UI提供了常见布局,可根据实际场景选择合适的布局。同Android开发中选用具体的布局进行页面开发:
- 线性布局,Row、Column
- 层叠布局,Stack
- 弹性布局,Flex,同线性布局,区别在于弹性布局默认能够使子组件压缩或拉伸,在需要填充容器时使用。
- 相对布局,RelativeContainer
- 栅格布局,GridRow、GridCol
- 媒体查询,@ohos.mediaquery,媒体查询可根据不同设备类型或同设备不同状态修改应用的样式。
- 列表,List,同Android中的ListView
- 网格,Grid,网格布局具有较强的页面均分能力,子组件占比控制能力,是一种重要自适应布局。
- 轮播,Swiper,使用该布局实现广告轮播、图片预览等效果。
最后分享一份鸿蒙(HarmonyOS)开发学习指南需要的可以扫码免费领取!!!
![](https://i-blog.csdnimg.cn/blog_migrate/be3d5da29093470f49fd7ad6a7059fd4.png)
《鸿蒙(HarmonyOS)开发学习指南》
第一章 快速入门
1、开发准备
2、构建第一个ArkTS应用(Stage模型)
3、构建第一个ArkTS应用(FA模型)
4、构建第一个JS应用(FA模型)
5、…
第二章 开发基础知识
1、应用程序包基础知识
2、应用配置文件(Stage模型)
3、应用配置文件概述(FA模型)
4、…
第三章 资源分类与访问
1、 资源分类与访问
2、 创建资源目录和资源文件
3、 资源访问
4、…
第四章 学习ArkTs语言
1、初识ArkTS语言
2、基本语法
3、状态管理
4、其他状态管理
5、渲染控制
6、…
第五章 UI开发
1.方舟开发框架(ArkUI)概述
2.基于ArkTS声明式开发范式
3.兼容JS的类Web开发范式
4…
第六章 Web开发
1.Web组件概述
2.使用Web组件加载页面
3.设置基本属性和事件
4.在应用中使用前端页面JavaScript
5.ArkTS语言基础类库概述
6.并发
7…
11.网络与连接
12.电话服务
13.数据管理
14.文件管理
15.后台任务管理
16.设备管理
17…
第七章 应用模型
1.应用模型概述
2.Stage模型开发指导
3.FA模型开发指导
4…
扫描下方二维码免费领取,《鸿蒙(HarmonyOS)开发学习指南》