专业网站建设基本流程,外贸型企业网站建设,建设厅网站查询三类人员,徐州网站一、概述
一个丰富的页面通常是由很多基础组件组成的#xff0c;那么我们如何才能让这些组件有条不紊地在页面上布局呢#xff1f;这就需要借助容器组件来实现。
容器组件是一种比较特殊的组件#xff0c;它可以包含其他的组件#xff0c;而且按照一定的规律布局#xf…一、概述
一个丰富的页面通常是由很多基础组件组成的那么我们如何才能让这些组件有条不紊地在页面上布局呢这就需要借助容器组件来实现。
容器组件是一种比较特殊的组件它可以包含其他的组件而且按照一定的规律布局帮助开发者生成精美的页面。容器组件除了放置基础组件外也可以放置容器组件通过多层布局的嵌套可以布局出更丰富的页面。
ArkTS为我们提供了丰富的容器组件来布局页面本文将以构建登录页面为例介绍Column和Row组件的属性与使用。 二、组件介绍
2.1 布局容器概念
线性布局容器表示按照垂直方向或者水平方向排列子组件的容器ArkTS提供了Column和Row容器来实现线性布局。
Column表示沿垂直方向布局的容器。Row表示沿水平方向布局的容器。 2.2 主轴和交叉轴概念
在布局容器中默认存在两根轴分别是主轴和交叉轴这两个轴始终是相互垂直的。不同的容器中主轴的方向不一样的。
主轴在Column容器中的子组件是按照从上到下的垂直方向布局的其主轴的方向是垂直方向在Row容器中的组件是按照从左到右的水平方向布局的其主轴的方向是水平方向。 交叉轴与主轴垂直相交的轴线如果主轴是垂直方向则交叉轴就是水平方向如果主轴是水平方向则交叉轴是垂直方向。 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?: stringRowRow(value?:{space?: string
Column和Row容器的接口都有一个可选参数space表示子组件在主轴方向上的间距。 三、基本使用
我们来具体讲解如何高效的使用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(…))
}至此你已经完成这个登录页面的简单布局实现了。
