鸿蒙应用开发之容器组件

一、概述

一个丰富的页面通常是由很多基础组件组成的,那么我们如何才能让这些组件有条不紊地在页面上布局呢?这就需要借助容器组件来实现。

容器组件是一种比较特殊的组件,它可以包含其他的组件,而且按照一定的规律布局,帮助开发者生成精美的页面。容器组件除了放置基础组件外,也可以放置容器组件,通过多层布局的嵌套,可以布局出更丰富的页面。

ArkTS为我们提供了丰富的容器组件来布局页面,本文将以构建登录页面为例,介绍Column和Row组件的属性与使用。

image.png

二、组件介绍

2.1 布局容器概念

线性布局容器表示按照垂直方向或者水平方向排列子组件的容器,ArkTS提供了Column和Row容器来实现线性布局。

  • Column表示沿垂直方向布局的容器。
  • Row表示沿水平方向布局的容器。

2.2 主轴和交叉轴概念

在布局容器中,默认存在两根轴,分别是主轴和交叉轴,这两个轴始终是相互垂直的。不同的容器中主轴的方向不一样的。

  • 主轴:在Column容器中的子组件是按照从上到下的垂直方向布局的,其主轴的方向是垂直方向;在Row容器中的组件是按照从左到右的水平方向布局的,其主轴的方向是水平方向。

image.png

  • 交叉轴:与主轴垂直相交的轴线,如果主轴是垂直方向,则交叉轴就是水平方向;如果主轴是水平方向,则交叉轴是垂直方向。

image.png

2.3 属性介绍

了解布局容器的主轴和交叉轴,主要是为了让大家更好地理解子组件在主轴和交叉轴的排列方式。接下来,我们将详细讲解Column和Row容器的两个属性justifyContent和alignItems。

属性名称描述
justifyContent设置子组件在主轴方向上的对齐格式。
alignItems设置子组件在交叉轴方向上的对齐格式。

子组件在主轴方向上的对齐使用justifyContent属性来设置,其参数类型是FlexAlign。FlexAlign定义了以下几种类型:

主轴方向的对齐(justifyContent)

子组件在主轴方向上的对齐使用justifyContent属性来设置,其参数类型是FlexAlign。FlexAlign定义了以下几种类型:

  • Start:元素在主轴方向首端对齐,第一个元素与行首对齐,同时后续的元素与前一个对齐。
  • Center:元素在主轴方向中心对齐,第一个元素与行首的距离以及最后一个元素与行尾距离相同。
  • End:元素在主轴方向尾部对齐,最后一个元素与行尾对齐,其他元素与后一个对齐。
  • SpaceBetween:元素在主轴方向均匀分配弹性元素,相邻元素之间距离相同。 第一个元素与行首对齐,最后一个元素与行尾对齐。
  • SpaceAround:元素在主轴方向均匀分配弹性元素,相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。
  • SpaceEvenly:元素在主轴方向等间距布局,无论是相邻元素还是边界元素到容器的间距都一样。

交叉轴方向的对齐(alignItems)

子组件在交叉轴方向上的对齐方式使用alignItems属性来设置。Column容器的主轴是垂直方向,交叉轴是水平方向,其参数类型为HorizontalAlign(水平对齐),HorizontalAlign定义了以下几种类型:

  • Start:设置子组件在水平方向上按照起始端对齐。
  • Center(默认值):设置子组件在水平方向上居中对齐。
  • End:设置子组件在水平方向上按照末端对齐。

Row容器的主轴是水平方向,交叉轴是垂直方向,其参数类型为VerticalAlign(垂直对齐),VerticalAlign定义了以下几种类型:

  • Top:设置子组件在垂直方向上居顶部对齐。
  • Center(默认值):设置子组件在竖直方向上居中对齐。
  • Bottom:设置子组件在竖直方向上居底部对齐。

2.4 接口介绍

接下来,我们介绍Column和Row容器的接口。

容器组件接口
ColumnColumn(value?:{space?: string
RowRow(value?:{space?: string

Column和Row容器的接口都有一个可选参数space,表示子组件在主轴方向上的间距。

image.png

三、基本使用

我们来具体讲解如何高效的使用Column和Row容器组件来构建这个登录页面。

当我们从设计同学那拿到一个页面设计图时,我们需要对页面进行拆解,先确定页面的布局,再分析页面上的内容分别使用哪些组件来实现。

我们仔细分析这个登录页面。在静态布局中,组件整体是从上到下布局的,因此构建该页面可以使用Column来构建。在此基础上,我们可以看到有部分内容在水平方向上由几个基础组件构成,例如页面中间的短信验证码登录与忘记密码以及页面最下方的其他方式登录,那么构建这些内容的时候,可以在Column组件中嵌套Row组件,继而在Row组件中实现水平方向的布局。

image.png

根据上述页面拆解,在Column容器里,依次是Image、Text、TextInput、Button等基础组件,还有两组组件是使用Row容器组件来实现的,主要代码如下:

@Entry
@Component
export struct LoginPage {build() {Column() {Image($r('app.media.logo'))...Text($r('app.string.login_page'))...Text($r('app.string.login_more'))...TextInput({ placeholder: $r('app.string.account') })...TextInput({ placeholder: $r('app.string.password') })...Row() {Text($r(…)) Text($r(…)) }Button($r('app.string.login'), { type: ButtonType.Capsule, stateEffect: true })...Row() {this.imageButton($r(…))this.imageButton($r(…))this.imageButton($r(…))}...}...}
}

我们详细看一下使用Row容器的两组组件。两个文本组件展示的内容是按水平方向布局的,使用两端对齐的方式。这里我们使用Row容器组件,并且需要配置主轴上(水平方向)的对齐格式justifyContent为FlexAlign.SpaceBetween(两端对齐)。

Row() {Text($r(…)) Text($r(…)) }.justifyContent(FlexAlign.SpaceBetween).width('100%')

其他登录方式的三个按钮也是按水平方向布局的,同样使用Row容器组件。这里按钮的间距是一致的,我们可以通过配置可选参数space来设置按钮间距,使子组件间距一致。

Row({ space: CommonConstants.LOGIN_METHODS_SPACE }) {this.imageButton($r(…))this.imageButton($r(…))this.imageButton($r(…))
}

至此,你已经完成这个登录页面的简单布局实现了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/75641.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Python】关于自定义对象的Json序列化和反序列化

背景 最近使用Ptyon爬虫数据时,遇到对象无法转换为JSON序列化对象问题TypeError: Object of type Main is not JSON serializable 意思: 就是对象不能转换为JSON序列化对象 原因: 是对象没有自定义实现转换为JSON序列化对象的方法没有。 实…

基于SSM的精品酒销售管理系统

末尾获取源码 开发语言:Java Java开发工具:JDK1.8 后端框架:SSM 前端:采用JSP技术开发 数据库:MySQL5.7和Navicat管理工具结合 服务器:Tomcat8.5 开发软件:IDEA / Eclipse 是否Maven项目&#x…

Java项目-苍穹外卖-Day10-SpirngTask及WebSocket

文章目录 前言SpringTask介绍SpringTask_corn表达式Spring_Task入门案例 订单状态定时处理需求分析代码开发功能测试 WebScoket介绍入门案例 来单提醒需求分析代码开发功能测试 客户催单代码开发功能测试 前言 本章实现的业务功能 超时未支付订单自动取消,配送中订…

想了解Java内存分析工具MAT?看这里哦

MAT 简介 MAT全称为 Eclipse Memory Analyzer Tool ,eclipse基金会开源的java堆内存分析工具,可以快速的进行堆内存分析、大对象可视化、类加载器分析、线程分析等。在我们碰到线上内存问题时候,是不可多得的好工具(当然也有artha…

打工人必装的5款黑科技软件,办公舒适度立刻提升数倍

分享打工人必装的5款黑科技软件,让你高效完成工作,办公舒适度立刻提升数倍。 DroidCam——手机充当电脑摄像头 DroidCam可以让你的手机充当电脑的摄像头,让手机拍摄到的画面实时投送到电脑屏幕上,也可以充当视频聊天的摄像头&…

民安智库(第三方满意度调研公司)公园游客满意度调查内容

设计公园游客满意度调查指标需要仔细考虑,以确保综合评估游客的体验和需求。以下是一些常见的公园游客满意度调查指标,您可以根据具体情况进行定制: 整体满意度评分: 游客对整个公园体验的总体满意度评分,通常以1到10…

import cv2

我看到一段opencv的代码,是在python环境跑的,我的python环境(anaconda - jupyter notebook)是刚装好的空白环境,没有opencv包。怎么用anaconda安装一个opencv包呢? 他使用了import cv2,我不知道…

Netty核心原理:一、基础入门-03:NettyServer接收数据

文章目录 一、前言介绍二、代码实现2.1 工程结构2.2 Netty服务端接收数据实现2.2.1 服务端处理器2.2.2 通道初始化2.2.3 netty服务端 2.3 单元测试 一、前言介绍 💡 介绍使用 netty 写一个能接收数据的 socketServer 服务端。 通过实现通道适配器 ChannelInboundHan…

Windows通过RDP异地远程桌面Ubuntu【内网穿透】

文章目录 前言1. ubuntu安装XRDP2.局域网测试连接3.安装cpolar内网穿透4.cpolar公网地址测试访问5.固定域名公网地址 前言 XRDP是一种开源工具,它允许用户通过Windows RDP访问Linux远程桌面。 除了Windows RDP外,xrdp工具还接受来自其他RDP客户端(如Fre…

基于Python和mysql开发的在线音乐网站系统(源码+数据库+程序配置说明书+程序使用说明书)

一、项目简介 本项目是一套基于Python和mysql开发的在线音乐网站系统(,主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Python学习者。 包含:项目源码、项目文档、数据库脚本等,该项目附带全部源码可作为毕设使用。 项目都经…

【面试题】前端开发中如何高效渲染大数据量?

前端面试题库 (面试必备) 推荐:★★★★★ 地址:前端面试题库 【国庆头像】- 国庆爱国 程序员头像!总有一款适合你! 在日常工作中,较少的能遇到一次性往页面中插入大量数据的场景…

城市修建(逆天的取值范围) long long, numeric_limits<long long>::max()

城市修建 时间限制:1S内存限制:64MB 描述 有一个城市需要修建,给你N个民居的坐标X,Y,问把这么多民居全都包进城市的话,城市所需最小面积是多少(注意,城市为平行于坐标轴的正方形) 输…

小白备战大厂算法笔试(六)——堆

文章目录 堆常用操作堆的实现存储与表示访问堆顶元素元素入堆元素出堆 常见应用建堆操作自上而下构建自下而上构建 TOP-K问题遍历选择排序堆 堆 堆是一种满足特定条件的完全二叉树,主要可分为下图所示的两种类型。 大顶堆:任意节点的值 ≥ 其子节点的值…

【Hello Algorithm】贪心算法

本篇博客介绍: 简单介绍下贪心算法 贪心算法 介绍贪心算法最小字典序的字符串拼接最多会议数切棍子的最小成本IPO灯塔问题 介绍贪心算法 贪心算法是一种极具有自然智慧的算法 它会使用以一种局部最功利的标准来做出一个当前看来最好的选择 如果说我们根据局部最优…

更改Windows上的远程桌面的侦听端口

《微软官网更改计算机上的远程桌面的侦听端口》 适用范围:Windows Server 2022、Windows 10、Windows 8.1、Windows 8、Windows Server 2019、Windows Server 2016、Windows Server 2012 R2、Windows Server 2008 R2 通过远程桌面客户端连接到计算机(Wi…

react导出excel?

1、先安装依赖 自行百度搜索或csdn 2.引入:import table2excel from js-table2excel 3、按钮点击事件(我是直接写在button按钮里面的 你们也可以写一个店家事件写进去) onClick{() > {console.log(list);const column [//数据表单{titl…

目标检测YOLO实战应用案例100讲-森林野火预警的小目标检测

目录 前言 传统目标检测算法 基于深度学习的目标检测算法 两阶段目标检测算法

kill -15 与kill -9的区别

kill -15和 kill -9 是常用的命令,都可以用来杀死进程。 那 kill -15 与 kill -9 有什么区别呢? kill - 后面跟的是信号 比如9、15 进程之间的通信就是让俩个进程之间交互 管道符进程的通信 还有一种就是信号ctrl c,也是信号跟kill一个意思…

【docker】私有仓库搭建

Docker 私有仓库搭建 在 Docker 中,当我们执行 docker pull xxx 的时候 ,它实际上是从 registry.hub.docker.com 这个地址去查找,这就是Docker公司为我们提供的公共仓库。在工作中,我们不可能把企业项目push到公有仓库进行管理。…

C高级 第四天

#!/bin/bash#1.实现一个对数组求和的函数,数组通过实参传递给函数 read -p "输入数组" -a arr sum0 function add() {for i in ${arr[*]}do((sumi))done } add arr echo $sum#2.写一个函数,输出当前用户的uid和gid,并使用变量接收结果 function my_id() {num1id -unu…