培训网站平台如何推广,万能网站网址下载,网站开发工具的功能包括html,公司模块化建设的意义1 概述
一个丰富的页面需要很多组件组成#xff0c;那么#xff0c;我们如何才能让这些组件有条不紊地在页面上布局呢#xff1f;这就需要借助容器组件来实现。
容器组件是一种比较特殊的组件#xff0c;它可以包含其他的组件#xff0c;而且按照一定的规律布局#xf…1 概述
一个丰富的页面需要很多组件组成那么我们如何才能让这些组件有条不紊地在页面上布局呢这就需要借助容器组件来实现。
容器组件是一种比较特殊的组件它可以包含其他的组件而且按照一定的规律布局帮助开发者生成精美的页面。容器组件除了放置基础组件外也可以放置容器组件通过多层布局的嵌套可以布局出更丰富的页面。
ArkTS为我们提供了丰富的容器组件来布局页面本文将以构建登录页面为例介绍Column和Row组件的属性与使用。 2 组件介绍
布局容器概念
线性布局容器表示按照垂直方向或者水平方向排列子组件的容器ArkTS提供了Column和Row容器来实现线性布局。 Column表示沿垂直方向布局的容器。 Row表示沿水平方向布局的容器。
主轴和交叉轴概念
在布局容器中默认存在两根轴分别是主轴和交叉轴这两个轴始终是相互垂直的。不同的容器中主轴的方向不一样的。
主轴在Column容器中的子组件是按照从上到下的垂直方向布局的其主轴的方向是垂直方向在Row容器中的组件是按照从左到右的水平方向布局的其主轴的方向是水平方向。
图1 Column容器Row容器主轴 交叉轴与主轴垂直相交的轴线如果主轴是垂直方向则交叉轴就是水平方向如果主轴是水平方向则交叉轴是垂直方向。
图2 Column容器Row容器交叉轴 属性介绍
了解布局容器的主轴和交叉轴主要是为了让大家更好地理解子组件在主轴和交叉轴的排列方式。
接下来我们将详细讲解Column和Row容器的两个属性justifyContent和alignItems。 1. 主轴方向的对齐justifyContent
子组件在主轴方向上的对齐使用justifyContent属性来设置其参数类型是FlexAlign。FlexAlign定义了以下几种类型
Start元素在主轴方向首端对齐第一个元素与行首对齐同时后续的元素与前一个对齐。 Center元素在主轴方向中心对齐第一个元素与行首的距离以及最后一个元素与行尾距离相同。 End元素在主轴方向尾部对齐最后一个元素与行尾对齐其他元素与后一个对齐。 SpaceBetween元素在主轴方向均匀分配弹性元素相邻元素之间距离相同。 第一个元素与行首对齐最后一个元素与行尾对齐。 SpaceAround元素在主轴方向均匀分配弹性元素相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。 SpaceEvenly元素在主轴方向等间距布局无论是相邻元素还是边界元素到容器的间距都一样。 2. 交叉轴方向的对齐alignItems
子组件在交叉轴方向上的对齐方式使用alignItems属性来设置。
Column容器的主轴是垂直方向交叉轴是水平方向其参数类型为HorizontalAlign水平对齐HorizontalAlign定义了以下几种类型
Start设置子组件在水平方向上按照起始端对齐。 Center默认值设置子组件在水平方向上居中对齐。 End设置子组件在水平方向上按照末端对齐。 Row容器的主轴是水平方向交叉轴是垂直方向其参数类型为VerticalAlign垂直对齐VerticalAlign定义了以下几种类型
Top设置子组件在垂直方向上居顶部对齐。 Center默认值设置子组件在竖直方向上居中对齐。 Bottom设置子组件在竖直方向上居底部对齐。 接口介绍
接下来我们介绍Column和Row容器的接口。 Column和Row容器的接口都有一个可选参数space表示子组件在主轴方向上的间距。
效果如下 3 组件使用
我们来具体讲解如何高效的使用Column和Row容器组件来构建这个登录页面。
当我们从设计同学那拿到一个页面设计图时我们需要对页面进行拆解先确定页面的布局再分析页面上的内容分别使用哪些组件来实现。
我们仔细分析这个登录页面。在静态布局中组件整体是从上到下布局的因此构建该页面可以使用Column来构建。在此基础上我们可以看到有部分内容在水平方向上由几个基础组件构成例如页面中间的短信验证码登录与忘记密码以及页面最下方的其他方式登录那么构建这些内容的时候可以在Column组件中嵌套Row组件继而在Row组件中实现水平方向的布局。 根据上述页面拆解在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(…))
}至此你已经完成这个登录页面的简单布局实现了。
为了能让大家更好的学习鸿蒙 (Harmony OS) 开发技术这边特意整理了《鸿蒙 (Harmony OS)开发学习手册》共计890页希望对大家有所帮助https://qr21.cn/FV7h05
《鸿蒙 (Harmony OS)开发学习手册》
入门必看https://qr21.cn/FV7h05
应用开发导读(ArkTS)应用开发导读(Java) HarmonyOS 概念https://qr21.cn/FV7h05
系统定义技术架构技术特性系统安全 如何快速入门https://qr21.cn/FV7h05
基本概念构建第一个ArkTS应用构建第一个JS应用…… 开发基础知识https://qr21.cn/FV7h05
应用基础知识配置文件应用数据管理应用安全管理应用隐私保护三方应用调用管控机制资源分类与访问学习ArkTS语言…… 基于ArkTS 开发https://qr21.cn/FV7h05
Ability开发UI开发公共事件与通知窗口管理媒体安全网络与链接电话服务数据管理后台任务(Background Task)管理设备管理设备使用信息统计DFX国际化开发折叠屏系列……
