1# @ohos.arkui.advanced.SplitLayout (上下结构布局) 2 3 4上下结构布局介绍了常用的页面布局样式。主要分为上下文本和上下图文两种类型。 5 6 7> **说明：** 8> 9> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 10 11 12## 导入模块 13 14``` 15import { SplitLayout } from '@ohos.arkui.advanced.SplitLayout' 16``` 17 18 19## 子组件 20 21无 22 23## 属性 24不支持[通用属性](ts-universal-attributes-size.md) 25 26 27## SplitLayout 28 29SplitLayout({mainImage: Resource, primaryText: string, secondaryText?: string, tertiaryText?: string, container: () => void }) 30 31**装饰器类型：**@Component 32 33**系统能力：** SystemCapability.ArkUI.ArkUI.Full 34 35**参数：** 36 37| 名称 | 参数类型 | 必填 | 装饰器类型 | 说明 | 38| -------- | -------- | -------- |---------------|--------| 39| mainImage | [ResourceStr](ts-types.md#resourcestr) | 是 | - | 传入图片。 | 40| primaryText | [ResourceStr](ts-types.md#resourcestr) | 是 | @Prop | 标题内容。 | 41| secondaryText | [ResourceStr](ts-types.md#resourcestr) | 否 | @Prop | 副标题内容。 | 42| tertiaryText | [ResourceStr](ts-types.md#resourcestr) | 否 | @Prop | 辅助文本。 | 43| container | () => void | 是 | @BuilderParam | 容器内组件。 | 44 45## 事件 46不支持[通用事件](ts-universal-events-click.md) 47 48## 示例 49 50```ts 51import { SplitLayout } from '@ohos.arkui.advanced.SplitLayout' 52@Entry 53@Component 54struct Index { 55 @State demoImage: Resource = $r("app.media.music") 56 57 build() { 58 Column() { 59 SplitLayout({ 60 mainImage: this.demoImage, 61 primaryText: '新歌推荐', 62 secondaryText: '私人订制新歌精选站，为你推荐专属优质新歌;', 63 tertiaryText: "每日更新", 64 }) { 65 Text('示例：空白区域容器内可添加组件') 66 .margin({top:36}) 67 } 68 } 69 .justifyContent(FlexAlign.SpaceBetween) 70 .height('100%') 71 .width('100%') 72 } 73} 74``` 75 76 77小于600vp布局： 78 79 80 81 82 83大于600vp小于840vp布局： 84 85 86 87 88 89大于840vp布局： 90 91 92 93
