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