1# 位置设置 2 3设置组件的对齐方式、布局方向和显示位置。 4 5> **说明：** 6> 7> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## align 10 11align(value: Alignment) 12 13设置容器元素绘制区域内的子元素的对齐方式。 14 15**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 16 17**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 18 19**系统能力：** SystemCapability.ArkUI.ArkUI.Full 20 21**参数：** 22 23| 参数名 | 类型 | 必填 | 说明 | 24| ------ | ------------------------------------------- | ---- | ------------------------------------------------------------ | 25| value | [Alignment](ts-appendix-enums.md#alignment) | 是 | 设置容器元素绘制区域内的子元素的对齐方式。<br/>只在Stack、Button、Marquee、StepperItem、Text、TextArea、TextInput、FolderStack中生效，其中和文本相关的组件Marquee、Text、TextArea、TextInput的align结果参考[textAlign](ts-basic-components-text.md#textalign)。<br/>不支持textAlign属性的组件则无法设置水平方向的文字对齐。<br/>默认值：Alignment.Center<br/>**说明：** <br/>在Stack中该属性与alignContent效果一致，只能设置子组件在容器内的对齐方式。 | 26 27## direction 28 29direction(value: Direction) 30 31设置容器元素内主轴方向上的布局。 32 33**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 34 35**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 36 37**系统能力：** SystemCapability.ArkUI.ArkUI.Full 38 39**参数：** 40 41| 参数名 | 类型 | 必填 | 说明 | 42| ------ | ------------------------------------------- | ---- | --------------------------------------------------- | 43| value | [Direction](ts-appendix-enums.md#direction) | 是 | 设置容器元素内主轴方向上的布局。<br/>属性配置为auto的时候，按照系统语言方向进行布局。<br/>该属性在Column组件上不生效。<br/>默认值：Direction.Auto | 44 45## position 46 47position(value: Position | Edges | LocalizedEdges) 48 49绝对定位，确定子组件相对父组件的位置。 50 51**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 52 53**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 54 55**系统能力：** SystemCapability.ArkUI.ArkUI.Full 56 57**参数：** 58 59| 参数名 | 类型 | 必填 | 说明 | 60| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 61| value | [Position](ts-types.md#position) \| [Edges<sup>12+</sup>](ts-types.md#edges12) \| [LocalizedEdges<sup>12+</sup>](ts-types.md#localizededges12) | 是 | 绝对定位，确定子组件相对父组件的位置。当父容器为Row/Column/Flex时，设置position的子组件不占位。<br/>Position类型基于父组件左上角确定位置;Edges类型基于父组件四边确定位置，top/left/right/bottom分别为组件各边距离父组件相应边的边距，通过边距来确定组件相对于父组件的位置;LocalizedEdges类型基于父组件四边确定位置，支持镜像模式。<br/>适用于置顶显示、悬浮按钮等组件在父容器中位置固定的场景。<br/>不支持在宽高为零的布局容器上设置。<br/>当父容器为[RelativeContainer](ts-container-relativecontainer.md), 且子组件设置了alignRules属性, 则子组件的position属性不生效。 | 62 63## markAnchor 64 65markAnchor(value: Position | LocalizedPosition) 66 67设置元素在位置定位时的锚点。 68 69**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 70 71**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 72 73**系统能力：** SystemCapability.ArkUI.ArkUI.Full 74 75**参数：** 76 77| 参数名 | 类型 | 必填 | 说明 | 78| ------ | -------------------------------- | ---- | ------------------------------------------------------------ | 79| value | [Position](ts-types.md#position) \| [LocalizedPosition<sup>12+</sup>](ts-types.md#localizedposition12) | 是 | 设置元素在位置定位时的锚点，从position或offset的位置上，进一步偏移。<br/>设置.position({x: value1, y: value2}).markAnchor({x: value3, y: value4})，效果等于设置.position({x: value1 - value3, y: value2 - value4})，offset同理。<br/>单独使用markAnchor，设置.markAnchor({x: value1, y: value2})，效果等于设置.offset({x: -value1, y: -value2})。<br/>API version 9及以前，默认值为：<br/>{<br/>x: 0,<br/>y: 0<br/>}<br/>API version 10：无默认值。 | 80 81## offset 82 83offset(value: Position | Edges | LocalizedEdges) 84 85相对偏移，组件相对原本的布局位置进行偏移。 86 87**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 88 89**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 90 91**系统能力：** SystemCapability.ArkUI.ArkUI.Full 92 93**参数：** 94 95| 参数名 | 类型 | 必填 | 说明 | 96| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 97| value | [Position](ts-types.md#position) \| [Edges<sup>12+</sup>](ts-types.md#edges12) \| [LocalizedEdges<sup>12+</sup>](ts-types.md#localizededges12) | 是 | 相对偏移，组件相对原本的布局位置进行偏移。offset属性不影响父容器布局，仅在绘制时调整位置。<br/>Position类型基于组件自身左上角偏移，Edges类型基于组件自身四边偏移。 offset属性设置 {x: x, y: y} 与设置 {left: x, top: y} 以及 {right: -x, bottom: -y} 效果相同, 类型LocalizedEdges支持镜像模式：LTR模式下start 等同于x，RTL模式下等同于-x<br/>API version 9及以前，默认值为：<br/>{<br/>x: 0,<br/>y: 0<br/>}<br/>默认单位：vp<br/>API version 10：无默认值。 | 98 99## alignRules<sup>9+</sup> 100 101alignRules(value: AlignRuleOption) 102 103指定设置在相对容器中子组件的对齐规则，仅当父容器为[RelativeContainer](ts-container-relativecontainer.md)时生效。 104 105**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 106 107**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 108 109**系统能力：** SystemCapability.ArkUI.ArkUI.Full 110 111**参数：** 112 113| 参数名 | 类型 | 必填 | 说明 | 114| ------ | ------------------------------------------- | ---- | ------------------------ | 115| value | [AlignRuleOption](#alignruleoption对象说明) | 是 | 指定设置在相对容器中子组件的对齐规则。 | 116 117## alignRules<sup>12+</sup> 118 119alignRules(alignRule: LocalizedAlignRuleOptions) 120 121指定设置在相对容器中子组件的对齐规则，仅当父容器为[RelativeContainer](ts-container-relativecontainer.md)时生效。该方法水平方向上以start和end分别替代原方法的left和right，以便在RTL模式下能镜像显示，建议使用该方法指定设置在相对容器中子组件的对齐规则。 122 123**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 124 125**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 126 127**系统能力：** SystemCapability.ArkUI.ArkUI.Full 128 129**参数：** 130 131| 参数名 | 类型 | 必填 | 说明 | 132| ------ | ------------------------------------------- | ---- | ------------------------ | 133| alignRule | [LocalizedAlignRuleOptions](#localizedalignruleoptions12对象说明) | 是 | 指定设置在相对容器中子组件的对齐规则。 | 134 135## AlignRuleOption对象说明 136 137**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 138 139| 名称 | 类型 | 描述 | 140| ------ | ------------------------------------------------------------ | ------------------------------------------------------------ | 141| left | { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) } | 设置左对齐参数。<br/>- anchor：设置作为锚点的组件的id值。<br/>- align：设置相对于锚点组件的对齐方式。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 142| right | { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) } | 设置右对齐参数。<br/>- anchor：设置作为锚点的组件的id值。<br/>- align：设置相对于锚点组件的对齐方式。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 143| middle | { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) } | 设置横向居中对齐方式的参数。<br/>- anchor：设置作为锚点的组件的id值。<br/>- align：设置相对于锚点组件的对齐方式。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 144| top | { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) } | 设置顶部对齐的参数。<br/>- anchor：设置作为锚点的组件的id值。<br/>- align：设置相对于锚点组件的对齐方式。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 145| bottom | { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) } | 设置底部对齐的参数。<br/>- anchor：设置作为锚点的组件的id值。<br/>- align：设置相对于锚点组件的对齐方式。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 146| center | { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) } | 设置纵向居中对齐方式的参数。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 147| bias<sup>11+</sup> | [Bias](#bias对象说明) | 设置组件在锚点约束下的偏移参数，其值为到左/上侧锚点的距离与锚点间总距离的比值。<br/>**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 148 149## LocalizedAlignRuleOptions<sup>12+</sup>对象说明 150 151**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 152 153| 名称 | 类型 | 描述 | 154| ------ | ------------------------------------------------------------ | ------------------------------------------------------------ | 155| start | [LocalizedHorizontalAlignParam](#localizedhorizontalalignparam12对象说明) | 设置横向对齐方式的参数，LTR模式时为左对齐，RTL模式时为右对齐。 | 156| end | [LocalizedHorizontalAlignParam](#localizedhorizontalalignparam12对象说明) | 设置横向对齐方式的参数，LTR模式时为右对齐，RTL模式时为左对齐。 | 157| middle | [LocalizedHorizontalAlignParam](#localizedhorizontalalignparam12对象说明) | 设置横向居中对齐方式的参数。| 158| top | [LocalizedVerticalAlignParam](#localizedverticalalignparam12对象说明) | 设置纵向顶部对齐的参数。 | 159| bottom | [LocalizedVerticalAlignParam](#localizedverticalalignparam12对象说明) | 设置纵向底部对齐的参数。 | 160| center | [LocalizedVerticalAlignParam](#localizedverticalalignparam12对象说明) | 设置纵向居中对齐方式的参数。 | 161| bias | [Bias](#bias对象说明) | 设置组件在锚点约束下的偏移参数，其值为到左/上侧锚点的距离与锚点间总距离的比值。| 162 163## LocalizedHorizontalAlignParam<sup>12+</sup>对象说明 164 165**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 166 167| 名称 | 类型 | 描述 | 168| ------ | ------------------------------------------------------------ | ------------------------------------------------------------ | 169| anchor | string | 设置作为锚点的组件的id值。 | 170| align | [HorizontalAlign](ts-appendix-enums.md#horizontalalign) | 设置相对于锚点组件的横向对齐方式。 | 171 172## LocalizedVerticalAlignParam<sup>12+</sup>对象说明 173 174**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 175 176| 名称 | 类型 | 描述 | 177| ------ | ------------------------------------------------------------ | ------------------------------------------------------------ | 178| anchor | string | 设置作为锚点的组件的id值。 | 179| align | [VerticalAlign](ts-appendix-enums.md#verticalalign) | 设置相对于锚点组件的纵向对齐方式。 | 180 181## Bias对象说明 182 183**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 184 185| 参数名 | 类型 | 必填 | 说明 | 186| ----- | ---------------------------------------- | ---- | ---------------------------------------- | 187| horizontal | number | 否 | 水平方向上的bias值。<br/>当子组件的width属性有正确值并且有2个水平方向的锚点时生效。<br/>默认值： 0.5 | 188| vertical | number | 否 | 垂直方向上的bias值。<br/>当子组件的height属性有正确值并且有2个垂直方向的锚点时生效。<br/>默认值： 0.5 | 189 190## chainMode<sup>12+</sup> 191 192chainMode(direction: Axis, style: ChainStyle) 193 194指定以该组件为链头所构成的链的参数，仅当父容器为[RelativeContainer](ts-container-relativecontainer.md)时生效。 195 196**系统能力：** SystemCapability.ArkUI.ArkUI.Full 197 198**参数：** 199 200| 参数名 | 类型 | 必填 | 说明 | 201| ------ | ------------------------------------------- | ---- | ------------------------ | 202| direction | [Axis](ts-appendix-enums.md#axis) | 是 | 链的方向。 | 203| style | [ChainStyle](chainstyle12) | 是 | 链的样式。 | 204 205## ChainStyle<sup>12+</sup> 206 207定义链的风格。 208 209**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 210 211**系统能力：** SystemCapability.ArkUI.ArkUI.Full 212 213| 名称 | 说明 | 214| ------------- | ------------------------------------------------------------ | 215| SPREAD | 组件在约束锚点间均匀分布。详细用法请参考[RelativeContainer示例7](ts-container-relativecontainer.md#示例7)。 | 216| SPREAD_INSIDE | 除首尾2个子组件的其他组件在约束锚点间均匀分布。详细用法请参考[RelativeContainer示例7](ts-container-relativecontainer.md#示例7)。 | 217| PACKED | 链内子组件无间隙。详细用法请参考[RelativeContainer示例7](ts-container-relativecontainer.md#示例7)。 | 218 219## 示例 220 221### 示例1 222```ts 223// xxx.ets 224@Entry 225@Component 226struct PositionExample1 { 227 build() { 228 Column() { 229 Column({ space: 10 }) { 230 // 元素内容<元素宽高，设置内容在与元素内的对齐方式 231 Text('align').fontSize(9).fontColor(0xCCCCCC).width('90%') 232 Stack() { 233 Text('First show in bottom end').height('65%').backgroundColor(0xD2B48C) 234 Text('Second show in bottom end').backgroundColor(0xF5DEB3).opacity(0.9) 235 }.width('90%').height(50).margin({ top: 5 }).backgroundColor(0xFFE4C4) 236 .align(Alignment.BottomEnd) 237 Stack() { 238 Text('top start') 239 }.width('90%').height(50).margin({ top: 5 }).backgroundColor(0xFFE4C4) 240 .align(Alignment.TopStart) 241 242 // 父容器设置direction为Direction.Ltr，子元素从左到右排列 243 Text('direction').fontSize(9).fontColor(0xCCCCCC).width('90%') 244 Row() { 245 Text('1').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3) 246 Text('2').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C) 247 Text('3').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3) 248 Text('4').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C) 249 } 250 .width('90%') 251 .direction(Direction.Ltr) 252 // 父容器设置direction为Direction.Rtl，子元素从右到左排列 253 Row() { 254 Text('1').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3).textAlign(TextAlign.End) 255 Text('2').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C).textAlign(TextAlign.End) 256 Text('3').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3).textAlign(TextAlign.End) 257 Text('4').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C).textAlign(TextAlign.End) 258 } 259 .width('90%') 260 .direction(Direction.Rtl) 261 } 262 } 263 .width('100%').margin({ top: 5 }) 264 } 265} 266``` 267 268 269 270### 示例2 271```ts 272// xxx.ets 273@Entry 274@Component 275struct PositionExample2 { 276 build() { 277 Column({ space: 20 }) { 278 // 设置子组件左上角相对于父组件左上角的偏移位置 279 Text('position').fontSize(12).fontColor(0xCCCCCC).width('90%') 280 Row() { 281 Text('1').size({ width: '30%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 282 .textAlign(TextAlign.Center) 283 Text('2 position(30, 10)') 284 .size({ width: '60%', height: '30' }) 285 .backgroundColor(0xbbb2cb) 286 .border({ width: 1 }) 287 .fontSize(16) 288 .align(Alignment.Start) 289 .position({ x: 30, y: 10 }) 290 Text('3').size({ width: '45%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 291 .textAlign(TextAlign.Center) 292 Text('4 position(50%, 70%)') 293 .size({ width: '50%', height: '50' }) 294 .backgroundColor(0xbbb2cb) 295 .border({ width: 1 }) 296 .fontSize(16) 297 .position({ x: '50%', y: '70%' }) 298 }.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed }) 299 300 // 相对于起点偏移，其中x为最终定位点距离起点水平方向间距，x>0往左，反之向右。 301 // y为最终定位点距离起点垂直方向间距，y>0向上，反之向下 302 Text('markAnchor').fontSize(12).fontColor(0xCCCCCC).width('90%') 303 Stack({ alignContent: Alignment.TopStart }) { 304 Row() 305 .size({ width: '100', height: '100' }) 306 .backgroundColor(0xdeb887) 307 Text('text') 308 .fontSize('30px') 309 .textAlign(TextAlign.Center) 310 .size({ width: 25, height: 25 }) 311 .backgroundColor(Color.Green) 312 .markAnchor({ x: 25, y: 25 }) 313 Text('text') 314 .fontSize('30px') 315 .textAlign(TextAlign.Center) 316 .size({ width: 25, height: 25 }) 317 .backgroundColor(Color.Green) 318 .markAnchor({ x: -100, y: -25 }) 319 Text('text') 320 .fontSize('30px') 321 .textAlign(TextAlign.Center) 322 .size({ width: 25, height: 25 }) 323 .backgroundColor(Color.Green) 324 .markAnchor({ x: 25, y: -25 }) 325 }.margin({ top: 25 }).border({ width: 1, style: BorderStyle.Dashed }) 326 327 // 相对定位，x>0向右偏移，反之向左，y>0向下偏移，反之向上 328 Text('offset').fontSize(12).fontColor(0xCCCCCC).width('90%') 329 Row() { 330 Text('1').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 331 .textAlign(TextAlign.Center) 332 Text('2 offset(15, 30)') 333 .size({ width: 120, height: '50' }) 334 .backgroundColor(0xbbb2cb) 335 .border({ width: 1 }) 336 .fontSize(16) 337 .align(Alignment.Start) 338 .offset({ x: 15, y: 30 }) 339 Text('3').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 340 .textAlign(TextAlign.Center) 341 Text('4 offset(-5%, 20%)') 342 .size({ width: 100, height: '50' }) 343 .backgroundColor(0xbbb2cb) 344 .border({ width: 1 }) 345 .fontSize(16) 346 .offset({ x: '-5%', y: '20%' }) 347 }.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed }) 348 } 349 .width('100%').margin({ top: 25 }) 350 } 351} 352``` 353 354 355 356### 示例3 357```ts 358// xxx.ets 359@Entry 360@Component 361struct Example3 { 362 build() { 363 Column({ space: 20 }){ 364 Text('position use Edges').fontSize(12).fontColor(0xCCCCCC).width('90%') 365 Row() { 366 Text('bottom:0, right:0').size({ width: '30%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 367 .textAlign(TextAlign.Center).position({bottom: 0, right: 0}) 368 Text('top:0, left:0').size({ width: '30%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 369 .textAlign(TextAlign.Center).position({top: 0, left: 0}) 370 Text('top:10%, left:50%').size({ width: '50%', height: '30' }).backgroundColor(0xbbb2cb).border({ width: 1 }).fontSize(16) 371 .textAlign(TextAlign.Center).position({ top: '10%', left: '50%' }) 372 Text('bottom:0, left:30').size({ width: '50%', height: '30' }).backgroundColor(0xbbb2cb).border({ width: 1 }).fontSize(16) 373 .textAlign(TextAlign.Center).position({ bottom: 0, left: 30 }) 374 }.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed }) 375 376 377 Text('offset use Edges').fontSize(12).fontColor(0xCCCCCC).width('90%') 378 Row() { 379 Text('1').size({ width: '25%', height: 50 }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 380 .textAlign(TextAlign.Center) 381 Text('2 top:30, left:0').size({ width: '25%', height: 50 }).backgroundColor(0xbbb2cb).border({ width: 1 }).fontSize(16) 382 .textAlign(TextAlign.Center).offset({top: 30, left: 0}) 383 Text('3').size({ width: '25%', height: 50 }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 384 .textAlign(TextAlign.Center) 385 Text('4 bottom:10, right:30').size({ width: '25%', height: 50 }).backgroundColor(0xbbb2cb).border({ width: 1 }).fontSize(12) 386 .textAlign(TextAlign.Center).offset({bottom: 10, right: 30}) 387 }.width('90%').height(150).border({ width: 1, style: BorderStyle.Dashed }) 388 }.width('100%').margin({ top: 25 }) 389 } 390} 391``` 392 393 394 395### 示例4 396```ts 397// xxx.ets 398// 通用布局属性支持镜像能力 399// 从上到下依次为position，offset，markAnchor接口效果 400// 黄色赋值为原本效果，粉色赋值为镜像效果 401import { LengthMetrics } from '@kit.ArkUI'; 402@Entry 403@Component 404struct Example4 { 405 private scroller: Scroller = new Scroller() 406 407 build() { 408 Column() { 409 Stack({ alignContent: Alignment.End }) { 410 Scroll(this.scroller) { 411 Flex({ direction: FlexDirection.Column }) { 412 RelativeContainer() { 413 Row() { 414 } 415 .position({ start: LengthMetrics.px(200), top: LengthMetrics.px(100) }) 416 .width("30%") 417 .height("20%") 418 .backgroundColor(Color.Pink) 419 .padding(50) 420 .margin(50) 421 Row() { 422 } 423 .position({ left:'200px', top: '100px' }) 424 .width("30%") 425 .height("20%") 426 .backgroundColor(Color.Yellow) 427 .padding(50) 428 .margin(50) 429 Row() { 430 } 431 .offset({ start: LengthMetrics.vp(100), top: LengthMetrics.vp(200) }) 432 .width("30%") 433 .height("20%") 434 .backgroundColor(Color.Pink) 435 .padding(50) 436 .margin(50) 437 Row() { 438 } 439 .offset({ left: 100, top: 200 }) 440 .width("30%") 441 .height("20%") 442 .backgroundColor(Color.Yellow) 443 .padding(50) 444 .margin(50) 445 Row() { 446 } 447 .markAnchor({ start: LengthMetrics.fp(100), top: LengthMetrics.fp(-350) }) 448 .width("30%") 449 .height("20%") 450 .backgroundColor(Color.Pink) 451 .padding(50) 452 .margin(50) 453 Row() { 454 } 455 .markAnchor({ x: '100fp', y: '-350fp' }) 456 .width("30%") 457 .height("20%") 458 .backgroundColor(Color.Yellow) 459 .padding(50) 460 .margin(50) 461 } 462 .backgroundColor(Color.White) 463 .padding(50) 464 .margin(50) 465 } 466 } 467 .width('100%') 468 .scrollBar(BarState.Off) 469 .scrollable(ScrollDirection.Vertical) 470 471 ScrollBar({ scroller: this.scroller, direction: ScrollBarDirection.Vertical, state: BarState.Auto }) { 472 Text() 473 .width(20) 474 .height(100) 475 .borderRadius(10) 476 .backgroundColor('#C0C0C0') 477 }.width(20).backgroundColor('#ededed') 478 } 479 }.height('90%') 480 } 481} 482``` 483
