HarmonyOS--ArkUI组件--容器组件Column和Row

已于 2023-12-05 14:43:50 修改
阅读量3.3k 收藏 5
点赞数 1
CC 4.0 BY-SA版权
分类专栏： harmonyos 文章标签： harmonyos
于 2023-09-08 14:16:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_39096247/article/details/132756611
本文介绍了ArkTS中的Column和Row容器，用于实现线性布局，详细讲解了主轴和交叉轴方向的对齐方式，以及justifyContent和alignItems属性的使用方法。

ArkTS提供了Column和Row容器来实现线性布局。

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

 Column和Row容器的接口:

 Column和Row容器的属性：

一：主轴方向的对齐（justifyContent属性）

justifyContent参数类型是FlexAlign,

FlexAlign类型有:Start(默认)/Center/End/SpaceBetween/SpaceAround/SpaceEvenly

二：交叉轴方向上的对齐 （alignItems属性）

Column容器的主轴是垂直方向，交叉轴是水平方向，其参数类型为

最低0.47元/天 解锁文章

200万优质内容无限畅学
鸿蒙开发笔记(十五): 线性布局 Row/Column,层叠布局 Stack,弹性布局 Flex
Waruler的博客
01-19 3171
线性布局 Row/Column,层叠布局 Stack,弹性布局 Flex
梅科尔工作室-牛泽-鸿蒙笔记2
2201_75598009的博客
02-03 1182
在此基础上，我们可以看到有部分内容在水平方向上由几个基础组件构成，例如页面中间的短信验证码登录与忘记密码以及页面最下方的其他方式登录，那么构建这些内容的时候，可以在Column组件中嵌套Row组件，继而在Row组件中实现水平方向的布局。LoadingProgress组件用于显示加载进展，比如应用的登录界面，当我们点击登录的时候，显示的“正在登录”的进度条状态。容器组件是一种比较特殊的组件，它可以包含其他的组件，而且按照一定的规律布局，帮助开发者生成精美的页面。第一个元素与行首对齐，最后一个元素与行尾对齐。
鸿蒙ArkUI开发：常用布局【交叉轴】
m0_62167422的博客
05-13 1708
鸿蒙是完全具备无与伦比的机遇和潜力的；预计到年底将有 5,000 款的应用完成原生鸿蒙开发，这么多的应用需要开发，也就意味着需要有更多的鸿蒙人才。鸿蒙开发工程师也将会迎来爆发式的增长，学习鸿蒙势在必行！
＜HarmonyOS第一课＞从简单的页面开始
qq_41881317的博客
12-21 619
线性布局容器表示按照垂直方向或者水平方向排列子组件的容器，ArkTS提供了Column和Row容器来实现线性布局。Column表示沿垂直方向布局的容器。Row表示沿水平方向布局的容器。了解布局容器的主轴和交叉轴，主要是为了让大家更好地理解子组件在主轴和交叉轴的排列方式。接下来，我们将详细讲解Column和Row容器的两个属性justifyContent和alignItems。属性名称描述设置子组件在主轴方向上的对齐格式。alignItems设置子组件在交叉轴方向上的对齐格式。
鸿蒙开发案列004 Column、Row容器组件组件
不断的重建
02-08 1048
Column、Row组件 布局对比。
HarmonyOS ArkUI容器类组件-线性布局容器（Row、Column）
m0_70748458的博客
05-29 971
(value?: { space?value：可选参数，space表示设置Row的子组件在水平方向上的间距，简单样例如下所示：Row() {Text().width(90)Text() // 模拟子组件之间的间隔为20.width(20)Text().width(20)Row({space: 20}) { // 设置子组件之间的间隔为20Text().width(90)Text().width(20)alignItems：参数类型为，表示子组件在竖直方向上的布局方式，Top。
【鸿蒙开发】 ArkUI容器类组件-线性布局容器（Row、Column）
最新发布
huchenghe2的博客
11-14 701
(value?: { space?value：可选参数，space表示设置Row的子组件在水平方向上的间距，简单样例如下所示：Row() {Text().width(90)Text() // 模拟子组件之间的间隔为20.width(20)Text().width(20)Row({space: 20}) { // 设置子组件之间的间隔为20Text().width(90)Text().width(20)alignItems：参数类型为，表示子组件在竖直方向上的布局方式，Top。
【HarmonyOS】ArkUI - 自定义组件
Creativity + Efficiency = Success
02-21 1767
ArkUI 如何创建和使用自定义组件，自定义构建函数 @Builder，自定义公共样式 @Styles，自定义组件特有属性 @Extend。利用这些功能，提高代码复用性，提高开发效率。
HarmonyOS ArkUI容器类组件-弹性布局容器（Flex）
m0_70748458的博客
05-29 860
本节简单介绍了 Flex 的使用方式，它的使用很灵活，读者熟练掌握各属性的渲染特性后可以根据设置参数构建出复杂的UI布局。
Flutter学习第三课-布局组件 Row和Column
chen1234219的博客
03-24 1632
线性布局 所谓线性布局，即指沿水平或垂直方向排布子组件。Flutter中通过Row和Column来实现线性布局。 Row 水平布局，Column 垂直布局 Row 和 Column 组件是不可以滚动的，所以在 Row 和Column 组件中不会放置过多子组件，如果你需- 要滚动应该使用 ListView。 如果只有一个子组件的话，应该考虑使用使用 Align 或者 Container 组件来定位...
【flutter】Row和Column组件
devnn的专栏
05-02 5143
Row和Column是flutter中最基础的容器组件，Row用来水平放置子组件，Column用来垂直放置子组件。它们都可以设置子组件的对齐方式。重点需要了解它们有哪些对齐方式，以及如何对齐的。 布局特点 Row在水平方向会尽可能大，大到会撑满parent；在垂直方向会尽可能小，小到能包裹住children。children在水平默认居左，垂直方向上默认居中。 Column在垂直方向上会尽可能大，...
Flutter布局组件之线性布局组件Row和Column
m0_46369686的博客
03-09 878
线性布局（Row和Column） 所谓线性布局，即指沿水平或垂直方向排布子组件。Flutter中通过Row和Column来实现线性布局，类似于Android中的LinearLayout控件。Row和Column都继承自Flex。 主轴和纵轴 对于线性布局，有主轴和纵轴之分，如果布局是沿水平方向，那么主轴就是指水平方向，而纵轴即垂直方向；如果布局沿垂直方向，那么主轴就是指垂直方向，而纵轴就是水平方向...
【flutter】column和row组件
qq_56132766的博客
04-12 265
flutter colunm和row
Row和Column
weixin_38107457的博客
05-18 1028
Row和Column是多子控件的容器类控件，Row控件水平布局，Column控件垂直布局。 在Row和Column中有一个非常重要的概念：MainAxisAlignment（主轴）和CrossAxisAlignment（交叉轴），简单来说，MainAxisAlignment（主轴）就是与当前控件方向一致的轴，而CrossAxisAlignment（交叉轴）就是与当前控件方向垂直的轴，比如Row的主轴是水平方向，交叉轴是垂直方向，而Column的主轴是垂直方向，交叉轴是水平方向。 主轴对齐方式 Row控
鸿蒙开发组件之Row、Column
Lu_Ca的博客
12-09 1508
其中，Row是横向排列，可以理解为1行，然后，Column是作为竖向排列，可以理解为1列。开发的过程中主要是对主轴的控制比较多，所以一般设置的属性是justifyContent。Row与Column布局时有两个重要的概念，主轴与交叉轴，可以通过设置主轴与交叉轴的排列方式来改变子控件的排列方向以及间隔等。通过设置Row与Column的justifyContent属性，控制子控件的排列方式。内边距可以理解一个Row中控件距离该Row的上下左右的距离。外边距可以理解一个Row距离其他Row的上下左右的距离。
HarmonyOS 常用容器组件1-Row与Column
yyxhzdm的博客
12-02 2339
容器组件是一种比较特殊的组件，它可以包含其他的组件，而且按照一定的规律布局，帮助开发者生成精美的页面。容器组件除了放置基础组件外，也可以放置容器组件，通过多层布局的嵌套，可以布局出更丰富的页面。主轴：在Column容器中的子组件是按照从上到下的垂直方向布局的，其主轴的方向就是垂直方向；在Row容器中的子组件是按照从左到右的水平方向布局的，其主轴的方向就是水平方向。了解布局容器的主轴与交叉轴，主要为了让大家理解组件在主轴与交叉轴上排列的方式。的主轴是垂直方向，交叉轴是水平方向，其参数类型为。
鸿蒙(HarmonyOS)应用开发——容器组件（Row组件和Column组件）
weixin_46282323的博客
11-30 1930
前面一篇文章中，已经说了基础组件。那么接下来就是容器组件fill:#333;color:#333;color:#333;fill:none;根据功能分类基础组件容器组件媒体组件绘制组件画布组件ColumnRowListTabsGridSwiper。
HarmonyOS之 组件的使用
qq_29848853的博客
09-21 2740
HarmonyOS之 组件的使用
看完必过，HarmonyOS应用开发者高级认证易错题整理
热门推荐
NVG_Haru的博客
01-22 1万+
看完必过，HarmonyOS应用开发者基础认证易错题整理
ArkUI常用组件详解：构建高效鸿蒙应用界面
资源摘要信息:"ArkUI是鸿蒙系统（HarmonyOS）应用开发中至关重要的UI框架，全称为“方舟UI框架”，它为开发者提供了一整套高效、灵活且功能强大的界面构建能力。本文深入解析了ArkUI的核心组件体系，旨在帮助具备...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值