HarmonyOS 鸿蒙Next基础布局中线性布局-Row详解

HarmonyOS 鸿蒙Next基础布局中线性布局-Row详解为什么要写这篇文章，因为线性布局中Row有很多默认的属性未讲解的清楚，以及使用的场景也并未明确。写这篇文章的目的就是让更多的开发者理解并熟悉默认的相关属性以及通常的使用场景。

首先认识下Row是布局中做什么的，基本概念要梳理清楚

布局容器：具有布局能力的容器组件，可以承载其他元素作为其子元素，布局容器会对其子元素进行尺寸计算和布局排列。
布局子元素：布局容器内部的元素。
主轴：线性布局容器在布局方向上的轴线，子元素默认沿主轴排列。Row容器主轴为水平方向
间距：布局子元素的间距。在布局容器内，可以通过space属性设置排列方向上子元素的间距，使各子元素在排列方向上有等间距效果。

先来感受一下单独的Row，添加上背景颜色。
从代码和预览中可以获知，Row本身是不带有默认宽高。添加一个Text元素后，观察。
从图中观察到，Row的宽度和高度是由内部组件内容+位置间距决定的。
当我们添加两个Text的组件时候，Row宽度继续被撑开，已经大于屏幕的宽度，但是默认是不能够被滑动。隐藏的部分其实也是一直被渲染的。当我们给Row添加一个宽度为50%时。
文字的内容被换行，从红色的背景是Row的大小，右边绿色的文字已经超出了Row的范围，当我们给第一个Text添加更多的内容时。
Row的高度被拉宽，并且两个Text是默认居中对齐。当我们改变Row的alignItems属性为VerticalAlign.Top时。
内部组件呈现居上对齐，并且包含margin的间隔，同时也表明，margin属性在对齐方式中，是跟随设置的组件中的。
我们来探究下Black，添加上该组件，在不设置Row的宽高的时候。

在不设置Row宽高的时候，Black是没有任何的作用的。当给Row设置指定的宽度100%，发现Blank占用了Row其余的所有空间。

适用场景的探究，从上面的Row的表现上来看，不设置宽高，完全由内部组件撑开Row组件，子组件内容一多就会出现溢出屏幕的问题。并且不支持滑动。由此可见，该线性组件适用于设置固定宽高，不溢出屏幕宽高的大小下进行页面的框架布局。或者是单个Item的平面布局。至于溢出屏幕的组件布局应该交于List或Scroll本身带有滑动属性的组件去完成。
实现滑动的Row，即使设置了Row的宽度，子组件的内容依然会超出Row的限制，并且超出屏幕的宽度，在外部添加Scroll组件。

现在依然不可以滑动，虽然Row的子组件已经超出屏幕，并且添加上了Scroll组件，由于设置了Row的宽度，即使Row的内部子组件已经被延伸到屏幕外边，Row的宽度并没有被延伸。此时去掉Row的宽度100%时候，Row才会由子组件撑开延伸，并且可滑动。

更多关于HarmonyOS 鸿蒙Next基础布局中线性布局-Row详解的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

htzhanglong 1楼•5 天前

HarmonyOS鸿蒙Next中的线性布局-Row

Row布局是一种用于水平排列子组件的布局方式。Row布局允许子组件在水平方向上依次排列，类似于Android中的LinearLayout的horizontal方向。Row布局的主要属性包括justifyContent、alignItems和wrap。

justifyContent

用于控制子组件在主轴（水平方向）上的对齐方式。常见取值有：

FlexAlign.Start：子组件从起始位置开始排列。
FlexAlign.Center：子组件在主轴方向上居中对齐。
FlexAlign.End：子组件在主轴方向上向末尾对齐。
FlexAlign.SpaceBetween：子组件在主轴方向上均匀分布，首尾子组件分别对齐起始和末尾。
FlexAlign.SpaceAround：子组件在主轴方向上均匀分布，每个子组件周围的空间相等。
FlexAlign.SpaceEvenly：子组件在主轴方向上均匀分布，包括首尾子组件。

alignItems

用于控制子组件在交叉轴（垂直方向）上的对齐方式。常见取值有：

ItemAlign.Auto：子组件根据自身属性对齐。
ItemAlign.Start：子组件在交叉轴方向上向起始位置对齐。
ItemAlign.Center：子组件在交叉轴方向上居中对齐。
ItemAlign.End：子组件在交叉轴方向上向末尾对齐。
ItemAlign.Stretch：子组件在交叉轴方向上拉伸以填满父容器。

wrap

用于控制子组件是否换行。默认值为false，表示子组件不换行；设置为true时，子组件在超出父容器宽度时会自动换行。

使用示例

Row({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center, wrap: true }) {
  Text('Item 1')
  Text('Item 2')
  Text('Item 3')
}

在这个示例中，三个Text组件在水平方向上均匀分布，垂直方向上居中对齐，并且在超出父容器宽度时会自动换行。

更多关于HarmonyOS 鸿蒙Next基础布局中线性布局-Row详解的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

zlyuanteng 2楼•5 天前

在HarmonyOS的鸿蒙Next中，Row是一种线性布局容器，用于在水平方向上排列子组件。Row的主要特点包括：

水平排列：子组件默认从左到右依次排列。
对齐方式：通过justifyContent属性可以设置子组件在主轴（水平方向）上的对齐方式，如FlexAlign.Start（左对齐）、FlexAlign.Center（居中对齐）、FlexAlign.End（右对齐）等。
交叉轴对齐：通过alignItems属性可以设置子组件在交叉轴（垂直方向）上的对齐方式，如VerticalAlign.Top（顶部对齐）、VerticalAlign.Center（居中对齐）、VerticalAlign.Bottom（底部对齐）等。
子组件权重：通过layoutWeight属性可以为子组件分配剩余空间，实现灵活的布局。

示例代码：

Row({ space: 10, justifyContent: FlexAlign.Center, alignItems: VerticalAlign.Center }) {
  Text('Item 1').layoutWeight(1)
  Text('Item 2').layoutWeight(2)
}

此代码创建了一个水平排列的Row，子组件Item 1和Item 2分别占据1/3和2/3的剩余空间，并在水平和垂直方向上居中对齐。