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