Row 行布局

2026-04-30   访问量:1001


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 盒子


热门文章
更多>