Harmony之学习Column&Row组件的使用

最新推荐文章于 2024-08-15 08:15:40 发布
最新推荐文章于 2024-08-15 08:15:40 发布
阅读量1.1k 收藏 19
点赞数 18
分类专栏： Harmony 文章标签： 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/byyourself10/article/details/135020726
版权

1 概述

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

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

ArkTS为我们提供了丰富的容器组件来布局页面，本文将以构建登录页面为例，介绍Column和Row组件的属性与使用。
在这里插入图片描述

2 组件介绍

布局容器概念

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

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

主轴和交叉轴概念

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

  1. 主轴：在Column容器中的子组件是按照从上到下的垂直方向布局的，其主轴的方向是垂直方向；在Row容器中的组件是按照从左到右的水平方向布局的，其主轴的方向是水平方向。
    在这里插入图片描述
  2. 交叉轴：与主轴垂直相交的轴线，如果主轴是垂直方向，则交叉轴就是水平方向；如果主轴是水平方向，则交叉轴是垂直方向。
    在这里插入图片描述

属性介绍

了解布局容器的主轴和交叉轴，主要是为了让大家更好地理解子组件在主轴和交叉轴的排列方式。

接下来，我们将详细讲解Column和Row容器的两个属性justifyContent和alignItems。
|

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

1. 主轴方向的对齐（justifyContent）

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

  • Start：元素在主轴方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。（默认）
    Column容器
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  build() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .justifyContent(FlexAlign.Start)
      .width('100%')
      .height('100%')
  }
}

在这里插入图片描述
Row容器

@Entry
@Component
struct Index {
  @State message: string = 'Hi'

  build() {
      Row() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .justifyContent(FlexAlign.Start)
      .width('100%')
      // .height('100%')
  }
}

在这里插入图片描述

  • Center：元素在主轴方向中心对齐，第一个元素与行首的距离以及最后一个元素与行尾距离相同。
    Column容器
@Entry
@Component
struct Index {
  @State message: string = 'Hi'

  build() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .justifyContent(FlexAlign.Center)
      .width('100%')
      .height('100%')
  }
}

在这里插入图片描述 Row容器

@Entry
@Component
struct Index {
  @State message: string = 'Hi'

  build() {
      Row() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .justifyContent(FlexAlign.Center)
      .width('100%')
      .height('100%')
  }
}

在这里插入图片描述

  • End：元素在主轴方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。
    Column容器
@Entry
@Component
struct Index {
  @State message: string = 'Hi'

  build() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .justifyContent(FlexAlign.End)
      .width('100%')
      .height('100%')
  }
}

在这里插入图片描述
Row容器

@Entry
@Component
struct Index {
  @State message: string = 'Hi'

  build() {
      Row() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .justifyContent(FlexAlign.End)
      .width('100%')
      .height('100%')
  }
}

在这里插入图片描述

  • SpaceBetween：元素在主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。
    Column容器
@Entry
@Component
struct Index {
  @State message: string = 'Hi'

  build() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .width('100%')
      .height('100%')
  }
}

在这里插入图片描述
Row容器

@Entry
@Component
struct Index {
  @State message: string = 'Hi'

  build() {
      Row() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .width('100%')
      .height('100%')
  }
}

在这里插入图片描述

  • SpaceAround：元素在主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。
    Column
@Entry
@Component
struct Index {
  @State message: string = 'Hi'

  build() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .justifyContent(FlexAlign.SpaceAround)
      .width('100%')
      .height('100%')
  }
}

在这里插入图片描述

Row容器

@Entry
@Component
struct Index {
  @State message: string = 'Hi'

  build() {
      Row() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .justifyContent(FlexAlign.SpaceAround)
      .width('100%')
      .height('100%')
  }
}

在这里插入图片描述

  • SpaceEvenly：元素在主轴方向等间距布局，无论是相邻元素还是边界元素到容器的间距都一样。
    Column容器
@Entry
@Component
struct Index {
  @State message: string = 'Hi'

  build() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .justifyContent(FlexAlign.SpaceEvenly)
      .width('100%')
      .height('100%')
  }
}

在这里插入图片描述
Row容器

@Entry
@Component
struct Index {
  @State message: string = 'Hi'

  build() {
      Row() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .justifyContent(FlexAlign.SpaceEvenly)
      .width('100%')
      .height('100%')
  }
}

在这里插入图片描述

2.交叉轴方向的对齐（alignItems）

子组件在交叉轴方向上的对齐方式使用alignItems属性来设置。

Column容器的主轴是垂直方向，交叉轴是水平方向，其参数类型为HorizontalAlign（水平对齐），HorizontalAlign定义了以下几种类型：

  • Start：设置子组件在水平方向上按照起始端对齐。
@Entry
@Component
struct Index {
  @State message: string = 'Hi'

  build() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .alignItems(HorizontalAlign.Start)
      .width('100%')
      .height('100%')
  }
}

在这里插入图片描述

  • Center（默认值）：设置子组件在水平方向上居中对齐。
@Entry
@Component
struct Index {
  @State message: string = 'Hi'

  build() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .alignItems(HorizontalAlign.Center)
      .width('100%')
      .height('100%')
  }
}

在这里插入图片描述

  • End：设置子组件在水平方向上按照末端对齐。
@Entry
@Component
struct Index {
  @State message: string = 'Hi'

  build() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .alignItems(HorizontalAlign.End)
      .width('100%')
      .height('100%')
  }
}

在这里插入图片描述
Row容器的主轴是水平方向，交叉轴是垂直方向，其参数类型为VerticalAlign（垂直对齐），VerticalAlign定义了以下几种类型：

  • Top：设置子组件在垂直方向上居顶部对齐。
@Entry
@Component
struct Index {
  @State message: string = 'Hi'

  build() {
      Row() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .alignItems(VerticalAlign.Top)
      .width('100%')
      .height('100%')
  }
}

在这里插入图片描述

  • Center（默认值）：设置子组件在竖直方向上居中对齐。
@Entry
@Component
struct Index {
  @State message: string = 'Hi'

  build() {
      Row() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .alignItems(VerticalAlign.Center)
      .width('100%')
      .height('100%')
  }
}

在这里插入图片描述

  • Bottom：设置子组件在竖直方向上居底部对齐。
@Entry
@Component
struct Index {
  @State message: string = 'Hi'

  build() {
      Row() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .alignItems(VerticalAlign.Bottom)
      .width('100%')
      .height('100%')
  }
}

在这里插入图片描述
接口介绍
接下来，我们介绍Column和Row容器的接口。

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

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

效果如下：
在这里插入图片描述

3 参考链接

Column组件的相关API参考：Column组件。
Row组件的相关API参考：Row组件。

byyourself10
关注
专栏目录
【ArkUI】对于Flex布局与基础组件&&声明式UI-组件封装&&父子组件相互绑定的运用
一键难忘的博客
09-24 755
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。父组件的@Prop变量可以初始化子组件的常规变量或@Prop变量，但不能初始化子组件的@State或@Link变量。重新编译上传，得到以下结果：上面的提示小文字与输入框进行了应该实时的双向绑定。2.放一个宽度为10的背景颜色为黑色的外边框来可视化弹性布局的大小。在登录下面输出一行提示的用户名，应该是用户输入随时变化的。3.在下面的TextInput引用该方法的值。2.在子组件里，引用到父组件传过来的值。
HarmonyOs开发之———页签切换、组件状态管理
this_is_bug的博客
04-11 513
Entry@ComponentColumn() {})build() {.tabBar(this.TabBuilder('首页', 0, $r('app.media.home_selected'), $r('app.media.home_normal'))).tabBar(this.TabBuilder('我的', 1, $r('app.media.mine_selected'), $r('app.media.mine_normal')))})...
HarmonyOS 组件篇
qq_27494201的博客
06-24 1518
文章目录1、Text（文本框）1.1、点击时：自动调节字体大小+动态增加文字1.2、跑马灯效果1.3、实现一个标题栏和详细内容的界面 1、Text（文本框） 1.1、点击时：自动调节字体大小+动态增加文字 MainAbilitySlice.java Text text = (Text) findComponentById(ResourceTable.Id_text); // 设置自动调整规则 text.setAutoFontSizeRule(30, 100, 1); // 设置点击一次增多一个"T" te
Harmony组件 容器组件-dialog
m0_60786034的博客
05-15 568
dialog v.对话；用对话表达 n.问答；(小说中的)对白；对话体，网络对话框；对话方块；对话盒 即控制弹窗，悬浮窗的组件。 自定义弹窗容器。 支持设备 手机 平板 智慧屏 智能穿戴 支持 支持 支持 支持 属性 除支持通用属性外，支持如下属性： 名称 类型
HarmonyOS线性布局指南：Row和Column的详细使用
最新发布
星辰探码的博客
08-15 1007
通过这些示例代码，你可以清楚地理解如何在Harmony中使用Row和Column布局来实现各种排列方式和自适应特性。掌握这些布局技巧将帮助你设计出灵活且美观的界面。希望这些示例能为你的开发工作提供有价值的参考。
HarmonyOS组件介绍
linxiaogua123的博客
02-02 3089
HarmonyOS基础知识
Harmony2.0开发—组件
roydon
09-24 2270
组件介绍
harmonyOS杂谈 - 自定义组件生命周期
weixin_42861217的博客
12-21 1294
自定义组件的创建：自定义组件的实例由ArkUI框架创建。初始化自定义组件的成员变量：通过本地默认值或者构造方法传递参数来初始化自定义组件的成员变量，初始化顺序为成员变量的定义顺序。如果开发者定义了aboutToAppear，则执行aboutToAppear方法。在首次渲染的时候，执行build方法渲染系统组件，如果子组件为自定义组件，则创建自定义组件的实例。状态变量 -> UI组件（包括ForEach和if）。
HarmonyOS应用开发-marquee组件使用
04-18
### HarmonyOS应用开发-marquee组件使用 在HarmonyOS的应用开发过程中，为了实现文本滚动的效果，我们可以使用`marquee`组件。此组件可以方便地帮助开发者实现动态展示文本的需求，适用于广告滚动、通知滚动等场景...
【HarmonyOS】【ArkUI】鸿蒙 eTS开发中Row组件显示多行文本
华为开发者联盟
07-05 830
eTS开发中Row组件无法多行显示文本？
HarmonyOs开发之———容器组件使用
this_is_bug的博客
04-02 872
请注意，HarmonyOS的UI框架可能会随着版本的更新而有所变化，因此为了获取最新和最准确的属性说明和用法，建议查阅HarmonyOS的官方文档。此外，这些示例代码可能需要配合其他组件（如。用于指定每个子组件在网格中的位置和跨度。表示从第二行第二列开始，占据一个单元格。如需了解更多请联系博主，本篇完。对象用于定义跨度和位置，比如。表示跨越所有行和列，
鸿蒙Harmony常用容器组件介绍
wodongx123的博客
01-21 1744
本文不介绍Text，Image这种单独的视图控件，主要还是过一下在构成一个复杂页面时所需要的外层的容器组件。免得在实际开发的时候要构建外层组件时不知道要用什么比较好本文虽然也会贴一些测试代码，但是参考还是以鸿蒙的API参考为主，最好在上手这些视图的同时，学习如何看API参考：打开DevEco Studio -> View（视图） -> Tool Windows（工具窗口） -> API reference（API参考） -> ArkTs组件 -> 容器组件。
HarmonyOS布局容器组件
当你发现自己的才华撑不起野心时，就请安静下来学习~
11-29 678
一般进行页面开发的流程中，当我们拿到页面设计图时，需要先对页面进行拆解，先确定页面的布局，再分析页面上的内容分别使用哪些组件来实现。在静态布局中，总得来说，组件是从上到下布局的。一个页面需要由若干组件组成，我们如何才能让这些组件有条不紊的在页面上布局，就需要借助容器组件来完成，比如布局容器Colum，Row等。了解了主轴和交叉轴，我们就可以更深刻和准确的理解相关属性，并正确使用。比如在Column和Row组件中的相关参数的含义。我们先学习布局容器的基础知识。
HarmonyOS应用开发者基础认证刷题
Ban__deng的博客
11-28 3838
适用于HarmonyOS应用开发者基础认证刷题练习
HarmonyOS应用开发者基础认证【满分答案】
热门推荐
_考不上研究生不改名的博客
10-12 7万+
B. 通过"$r(‘app.type.name’)"的形式引用应用资源，app代表是应用内resources目录中定义的资源，type代表资源类型（或资源的存放位置）。在Column和Row容器组件中，justifyContent用于设置子组件在主轴方向上的对齐格式，alignItems用于设置子组件在交叉轴方向上的对齐格式。E. 属性方法：用于组件属性的配置，统一通过属性方法进行设置，如fontSize()、width()、height()、color() 等。一个应用可以包含一个或多个Ability。
梅科尔工作室-刘晨-鸿蒙笔记2
weixin_73756394的博客
02-04 554
构建登录页面属性名称描述设置子组件在主轴方向上的对齐格式。alignItems设置子组件在交叉轴方向上的对齐格式。1. 主轴方向的对齐（justifyContent）2. 交叉轴方向的对齐（alignItems）Column容器Row容器2.常用基础组件。
HarmonyOS之 组件的使用
qq_29848853的博客
09-21 2263
HarmonyOS之 组件的使用
HarmonyOS应用开发者-----基础认证试题及答案
u010689434的博客
09-01 1万+
HarmonyOS应用开发者-----基础认证试题及答案
harmonyos应用开发者高级认证考试部分答案
weixin_56703682的博客
11-24 9120
6.在Column和Row容器组件中，alignItems用于设置子组件在主轴方向上的对齐格式，justifyContent用于设置子组件在交叉轴方向上的对齐格式（错）8.云函数打包完成后，需要到AppGallery Connect创建对应函数的触发器才可以在端侧中调用（错）（ 86-189****1234）3 HarmonyOS应用可以兼容OpenHarmony生态（对）4.下面哪个组件不能包含子组件：（LoadingProgress）1只要使用端云一体化的云端资源就需要支付费用（错）
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值