Row 行布局

最近更新时间:2025-12-30 17:25:52

我的收藏

组件功能

Row 是水平方向布局容器,是 Box 组件的快捷方式,direction 固定为 "row"。
它用于在水平方向排列子组件,并支持弹性布局、间距、对齐、边框和背景等样式配置。

基础用法

Template 示例:
<Row gap="12px" align="center">
<Icon name="user" />
<Text value="用户名" />
</Row>
效果展示如下:




属性说明

所有属性与 Box 盒子 组件相同,但 direction 固定为 "row"

布局属性

属性名
类型
描述
默认值
children
ChatKitComponent[]
子组件列表
-
align
Alignment
交叉轴对齐方式
-
justify
Justification
主轴对齐方式
-
wrap
"nowrap" | "wrap" | "wrap-reverse"
换行方式
"nowrap"
flex
number | string
Flex 值
-
gap
number | string
子元素间距
-
padding
number | string | Spacing
内边距
-
border
number | Border | Borders
边框配置
-
background
string | ThemeColor
背景颜色
-

尺寸属性

属性名
类型
描述
默认值
height
number | string
高度
-
width
number | string
宽度
-
size
number | string
同时设置宽高
-
minHeight
number | string
最小高度
-
minWidth
number | string
最小宽度
-
minSize
number | string
最小尺寸
-
maxHeight
number | string
最大高度
-
maxWidth
number | string
最大宽度
-
maxSize
number | string
最大尺寸
-
aspectRatio
number | string
宽高比
-
radius
RadiusValue
圆角
-
margin
number | string | Spacing
外边距
-
详细的类型定义请参见 Box 盒子