介绍

官方API

沿水平方向布局容器，该布局内的控件，都显示在一行

接口

Row(value?: {space?: string | number})

参数

• space：类型：string | number，元素水平方向间距。
  可选值为 大于等于0 的数字，或者可以转换为数字的字符串。默认值：0，单位：vp
  注意：justifyContent 设置为 FlexAlign.SpaceBetween、FlexAlign.SpaceAround、FlexAlign.SpaceEvenly 时不生效。

方法

设置子组件在垂直方向上的对齐格式

alignItems(value: VerticalAlign)

参数

• value：类型：HorizontalAlign，必填，子组件在水平方向上的对齐格式。
  • VerticalAlign.Top：顶部对齐。
  • VerticalAlign.Center：居中对齐，默认对齐方式。
  • VerticalAlign.Bottom：底部对齐。

设置子组件在水平方向上的对齐格式

justifyContent(value: FlexAlign)

参数

• value：类型：FlexAlign，必填，子组件在垂直方向上的对齐格式。默认值：FlexAlign.Start

FlexAlign枚举

• Start：靠左对齐

• Center：居中对齐

• End：靠右对齐

• SpaceBetween：第一个元素靠左对齐，最后一个元素靠右对齐，其余元素居中对齐，相邻元素之间距离相同。

• SpaceAround：Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。

• SpaceEvenly：Flex主轴方向均匀分配弹性元素，相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

例子

并列显示文字、输入框

Row(){
    Text("用户名：") // 显示文本
    TextInput()
      .width("70%")// 设置宽度
}

并列显示2个按钮

Row(){
    Button("  登  录  ")
    Button("  注  册  ")
}

案例

见 链接

原文出处：/show_1GW3cNWvWWs.html