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