HarmonyOS API：容器组件

joytrian

发布于 2023-3-24 16:59

3725浏览

0收藏

版本：v3.1 Beta

Row

更新时间: 2023-02-17 09:19

沿水平方向布局容器。

说明

该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

可以包含子组件。

接口

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

参数：

参数名	参数类型	必填	参数描述
space	string \| number	否	横向布局元素间距。从API version 9开始，space为负数时不生效。默认值：0，单位vp

属性

名称	参数类型	描述
alignItems	VerticalAlign	设置子组件在垂直方向上的对齐格式。默认值：VerticalAlign.Center
justifyContent⁸⁺	FlexAlign	设置子组件在水平方向上的对齐格式。 FlexAlign.Start

示例

// xxx.ets
@Entry
@Component
struct RowExample {
  build() {
    Column({ space: 5 }) {
      // 设置子组件水平方向的间距为5
      Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Row({ space: 5 }) {
        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
        Row().width('30%').height(50).backgroundColor(0x00FFFF)
      }.width('90%').height(107).border({ width: 1 })

      // 设置子元素垂直方向对齐方式
      Text('alignItems(Bottom)').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Row() {
        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
        Row().width('30%').height(50).backgroundColor(0x00FFFF)
      }.width('90%').alignItems(VerticalAlign.Bottom).height('15%').border({ width: 1 })

      Text('alignItems(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Row() {
        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
        Row().width('30%').height(50).backgroundColor(0x00FFFF)
      }.width('90%').alignItems(VerticalAlign.Center).height('15%').border({ width: 1 })

      // 设置子元素水平方向对齐方式
      Text('justifyContent(End)').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Row() {
        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
        Row().width('30%').height(50).backgroundColor(0x00FFFF)
      }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.End)

      Text('justifyContent(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Row() {
        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
        Row().width('30%').height(50).backgroundColor(0x00FFFF)
      }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.Center)
    }.width('100%')
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.

HarmonyOS API：容器组件-鸿蒙开发者社区

RowSplit

更新时间: 2023-02-17 09:19

将子组件横向布局，并在每个子组件之间插入一根纵向的分割线。

说明

该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

可以包含子组件

接口

RowSplit()

属性

名称	参数类型	描述
resizeable	boolean	分割线是否可拖拽，默认为false。

说明

RowSplit的分割线最小能拖动到刚好包含子组件。
在真机中查看拖动效果，预览器中不支持拖动。

示例

// xxx.ets
@Entry
@Component
struct RowSplitExample {
  build() {
    Column() {
      Text('The second line can be dragged').fontSize(9).fontColor(0xCCCCCC).width('90%')
      RowSplit() {
        Text('1').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
        Text('2').width('10%').height(100).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
        Text('3').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
        Text('4').width('10%').height(100).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
        Text('5').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
      }
      .resizeable(true) // 可拖动
      .width('90%').height(100)
    }.width('100%').margin({ top: 5 })
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

HarmonyOS API：容器组件-鸿蒙开发者社区

SideBarContainer

更新时间: 2023-02-17 09:19

提供侧边栏可以显示和隐藏的侧边栏容器，通过子组件定义侧边栏和内容区，第一个子组件表示侧边栏，第二个子组件表示内容区。

说明

该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

可以包含子组件。

接口

SideBarContainer( type?: SideBarContainerType )

参数：

参数名	参数类型	必填	参数描述
type	SideBarContainerType	否	设置侧边栏的显示类型。默认值：SideBarContainerType.Embed

SideBarContainerType枚举说明

名称	描述
Embed	侧边栏嵌入到组件内，和内容区并列显示。
Overlay	侧边栏浮在内容区上面。

属性

名称	参数类型	描述
showSideBar	boolean	设置是否显示侧边栏。默认值：true
controlButton	ButtonStyle	设置侧边栏控制按钮的属性。
showControlButton	boolean	设置是否显示控制按钮。默认值：true
sideBarWidth	number \| Length⁹⁺	设置侧边栏的宽度。默认值：200，单位vp
minSideBarWidth	number \| Length⁹⁺	设置侧边栏最小宽度。默认值：200，单位vp
maxSideBarWidth	number \| Length⁹⁺	设置侧边栏最大宽度。默认值：280，单位vp
autoHide⁹⁺	boolean	设置当侧边栏拖拽到小于最小宽度后，是否自动隐藏。默认值：true
sideBarPosition⁹⁺	SideBarPosition	设置侧边栏显示位置。默认值：SideBarPosition.Start

ButtonStyle对象说明

名称	参数类型	必填	描述
left	number	否	设置侧边栏控制按钮距离容器左界限的间距。默认值：16，单位vp
top	number	否	设置侧边栏控制按钮距离容器上界限的间距。默认值：48，单位vp
width	number	否	设置侧边栏控制按钮的宽度。默认值：32，单位vp
height	number	否	设置侧边栏控制按钮的高度。默认值：32，单位vp
icons	{ shown: string \| PixelMap \| Resource , hidden: string \| PixelMap \| Resource , switching?: string \| PixelMap \| Resource }	否	设置侧边栏控制按钮的图标： - shown: 设置侧边栏显示时控制按钮的图标。 - hidden: 设置侧边栏隐藏时控制按钮的图标。 - switching:设置侧边栏显示和隐藏状态切换时控制按钮的图标。

SideBarPosition⁹⁺枚举说明

名称	描述
Start	侧边栏位于容器左侧。
End	侧边栏位于容器右侧。

事件

名称	功能描述
onChange(callback: (value: boolean) => void)	当侧边栏的状态在显示和隐藏之间切换时触发回调。 true表示显示，false表示隐藏。

示例

// xxx.ets
@Entry
@Component
struct SideBarContainerExample {
  normalIcon : Resource = $r("app.media.icon")
  selectedIcon: Resource = $r("app.media.icon")
  @State arr: number[] = [1, 2, 3]
  @State current: number = 1

  build() {
    SideBarContainer(SideBarContainerType.Embed)
    {
      Column() {
        ForEach(this.arr, (item, index) => {
          Column({ space: 5 }) {
            Image(this.current === item ? this.selectedIcon : this.normalIcon).width(64).height(64)
            Text("Index0" + item)
              .fontSize(25)
              .fontColor(this.current === item ? '#0A59F7' : '#999')
              .fontFamily('source-sans-pro,cursive,sans-serif')
          }
          .onClick(() => {
            this.current = item
          })
        }, item => item)
      }.width('100%')
      .justifyContent(FlexAlign.SpaceEvenly)
      .backgroundColor('#19000000')



      Column() {
        Text('SideBarContainer content text1').fontSize(25)
        Text('SideBarContainer content text2').fontSize(25)
      }
      .margin({ top: 50, left: 20, right: 30 })
    }
    .sideBarWidth(150)
    .minSideBarWidth(50)
    .maxSideBarWidth(300)
    .onChange((value: boolean) => {
      console.info('status:' + value)
    })
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.

HarmonyOS API：容器组件-鸿蒙开发者社区

文章转载自：https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-container-sidebarcontainer-0000001428061760-V3?catalogVersion=V3

分类

卡片开发

三方库

标签

HarmonyOS API

51CTO

51CTO博客

51CTO学堂

HarmonyOS API：容器组件

Row

子组件

接口

属性

示例

RowSplit

子组件

接口

属性

示例

SideBarContainer

子组件

接口

SideBarContainerType枚举说明

属性

ButtonStyle对象说明

SideBarPosition⁹⁺枚举说明

事件

示例

目录

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

HarmonyOS API：容器组件

Row

子组件

接口

属性

示例

RowSplit

子组件

接口

属性

示例

SideBarContainer

子组件

接口

SideBarContainerType枚举说明

属性

ButtonStyle对象说明

SideBarPosition9+枚举说明

事件

示例

目录

订阅鸿蒙技术特刊，精选内容抢先看

SideBarPosition⁹⁺枚举说明