1# Location 2 3The location attributes set the alignment mode, layout direction, and position of a component. 4 5> **NOTE** 6> 7> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9## align 10 11align(value: Alignment) 12 13Sets the alignment mode of the component content in the drawing area. 14 15**Widget capability**: This API can be used in ArkTS widgets since API version 9. 16 17**Atomic service API**: This API can be used in atomic services since API version 11. 18 19**System capability**: SystemCapability.ArkUI.ArkUI.Full 20 21**Parameters** 22 23| Name| Type | Mandatory| Description | 24| ------ | ------------------------------------------- | ---- | ------------------------------------------------------------ | 25| value | [Alignment](ts-appendix-enums.md#alignment) | Yes | Sets the alignment mode of the component content in the drawing area.<br>This attribute is available only in the following components: **Stack**, **Button**, **StepperItem**,**FolderStack**, **Marquee**, **Text**, **TextArea**, and **TextInput**. For details about the alignment results of text-related components (the last four aforementioned components), see [textAlign](ts-basic-components-text.md#textalign).<br>If the component does not support the **textAlign** attribute, horizontal alignment cannot be set for text.<br>Default value: **Alignment.Center**<br>**NOTE**<br>In the **Stack** component, this attribute has the same effect as **alignContent**, which means that it sets the alignment mode of child components in the container.| 26 27## direction 28 29direction(value: Direction) 30 31Sets how elements are laid out along the main axis of the container. 32 33**Widget capability**: This API can be used in ArkTS widgets since API version 9. 34 35**Atomic service API**: This API can be used in atomic services since API version 11. 36 37**System capability**: SystemCapability.ArkUI.ArkUI.Full 38 39**Parameters** 40 41| Name| Type | Mandatory| Description | 42| ------ | ------------------------------------------- | ---- | --------------------------------------------------- | 43| value | [Direction](ts-appendix-enums.md#direction) | Yes | How elements are laid out along the main axis of the container.<br>If this parameter is set to **auto**, the layout is subject to the system language.<br>The attribute does not take effect in the **Column** component.<br>Default value: **Direction.Auto**| 44 45## position 46 47position(value: Position | Edges | LocalizedEdges) 48 49Sets the absolute position of the component relative to the position of the parent component. 50 51**Widget capability**: This API can be used in ArkTS widgets since API version 9. 52 53**Atomic service API**: This API can be used in atomic services since API version 11. 54 55**System capability**: SystemCapability.ArkUI.ArkUI.Full 56 57**Parameters** 58 59| Name| Type | Mandatory| Description | 60| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 61| value | [Position](ts-types.md#position) \| [Edges<sup>12+</sup>](ts-types.md#edges12) \| [LocalizedEdges<sup>12+</sup>](ts-types.md#localizededges12) | Yes | Absolute position of the component relative to the position of the parent component. If the parent container is **Row**, **Column**, or **Flex**, the child component for which **position** is set does not take up space in the container.<br>If of the Position type, this parameter sets the position based on the upper left corner of the parent component. If of the Edges type, this parameter sets the position based on the offset relative to the four edges of the parent component. If of the LocalizedEdges type, this parameter sets the position based on the offset relative to the four edges of the parent component, with support for the mirror mode.<br>The **position** attribute is applicable to scenarios where the component's position in the parent container is fixed, for example, where it is pinned to top or floating on the UI.<br>The attribute is not available for a layout container whose width and height are zero.<br>The attribute does not take effect when the component is in a [RelativeContainer](ts-container-relativecontainer.md) component and with the **alignRules** attribute set.| 62 63## markAnchor 64 65markAnchor(value: Position | LocalizedPosition) 66 67Sets the anchor for locating the component. 68 69**Widget capability**: This API can be used in ArkTS widgets since API version 9. 70 71**Atomic service API**: This API can be used in atomic services since API version 11. 72 73**System capability**: SystemCapability.ArkUI.ArkUI.Full 74 75**Parameters** 76 77| Name| Type | Mandatory| Description | 78| ------ | -------------------------------- | ---- | ------------------------------------------------------------ | 79| value | [Position](ts-types.md#position) \| [LocalizedPosition<sup>12+</sup>](ts-types.md#localizedposition12) | Yes | Anchor for locating the component, which is used to move the component further away from the position specified by **position** or **offset**.<br>**.position({x: value1, y: value2}).markAnchor({x: value3, y: value4})** has the same effect as **.position({x: value1 - value3, y: value2 - value4})**. The same applies to **offset**.<br>When **markAnchor** is used alone, **markAnchor ({x: value1, y: value2})** has the same effect as **.offset ({x: -value1, y: -value2})**.<br>The default value varies by API version.<br>API version 9 and earlier:<br>{<br>x: 0,<br>y: 0<br>}<br>API version 10: none| 80 81## offset 82 83offset(value: Position | Edges | LocalizedEdges) 84 85Sets the offset of the component relative to its original position. 86 87**Widget capability**: This API can be used in ArkTS widgets since API version 9. 88 89**Atomic service API**: This API can be used in atomic services since API version 11. 90 91**System capability**: SystemCapability.ArkUI.ArkUI.Full 92 93**Parameters** 94 95| Name| Type | Mandatory| Description | 96| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 97| value | [Position](ts-types.md#position) \| [Edges<sup>12+</sup>](ts-types.md#edges12) \| [LocalizedEdges<sup>12+</sup>](ts-types.md#localizededges12) | Yes | Offset of the component relative to its original position. The **offset** attribute does not affect the layout of the parent container. It adjusts the component position only during drawing.<br>If of the Position type, this parameter sets the offset relative to the upper left corner of the component. If of the Edges type, this parameter sets the offset relative to the four edges of the component. **{x: x, y: y}** has the same effect as **{left: x, top: y}** and **{right: -x, bottom: -y}**. The LocalizedEdges type supports the mirror mode: **start** is equivalent to **x** with left-to-right scripts and **-x** with right-to-left scripts.<br>The default value varies by API version.<br>API version 9 and earlier:<br>{<br>x: 0,<br>y: 0<br>}<br>Default unit: vp<br>API version 10: none| 98 99## alignRules<sup>9+</sup> 100 101alignRules(value: AlignRuleOption) 102 103Sets the alignment rules in the relative container. This API is valid only when the container is [RelativeContainer](ts-container-relativecontainer.md). 104 105**Widget capability**: This API can be used in ArkTS widgets since API version 9. 106 107**Atomic service API**: This API can be used in atomic services since API version 11. 108 109**System capability**: SystemCapability.ArkUI.ArkUI.Full 110 111**Parameters** 112 113| Name| Type | Mandatory| Description | 114| ------ | ------------------------------------------- | ---- | ------------------------ | 115| value | [AlignRuleOption](#alignruleoption) | Yes | Alignment rules in the relative container.| 116 117## alignRules<sup>12+</sup> 118 119alignRules(alignRule: LocalizedAlignRuleOptions) 120 121Sets the alignment rules in the relative container. This API is valid only when the container is [RelativeContainer](ts-container-relativecontainer.md). This API takes the right-to-left scripts into account, using **start** and **end** instead of **left** and **right** for alignment in the horizontal direction. Prioritize this API in aligning child components in the relative container. 122 123**Widget capability**: This API can be used in ArkTS widgets since API version 12. 124 125**Atomic service API**: This API can be used in atomic services since API version 12. 126 127**System capability**: SystemCapability.ArkUI.ArkUI.Full 128 129**Parameters** 130 131| Name| Type | Mandatory| Description | 132| ------ | ------------------------------------------- | ---- | ------------------------ | 133| alignRule | [LocalizedAlignRuleOptions](#localizedalignruleoptions12) | Yes | Alignment rules in the relative container.| 134 135## AlignRuleOption 136 137**Widget capability**: This API can be used in ArkTS widgets since API version 9. 138 139| Name | Type | Description | 140| ------ | ------------------------------------------------------------ | ------------------------------------------------------------ | 141| left | { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) } | Left alignment.<br>- **anchor**: ID of the component that functions as the anchor point.<br>- **align**: alignment mode relative to the anchor component.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 142| right | { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) } | Right alignment.<br>- **anchor**: ID of the component that functions as the anchor point.<br>- **align**: alignment mode relative to the anchor component.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 143| middle | { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) } | Horizontal center alignment.<br>- **anchor**: ID of the component that functions as the anchor point.<br>- **align**: alignment mode relative to the anchor component.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 144| top | { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) } | Top alignment.<br>- **anchor**: ID of the component that functions as the anchor point.<br>- **align**: alignment mode relative to the anchor component.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 145| bottom | { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) } | Bottom alignment.<br>- **anchor**: ID of the component that functions as the anchor point.<br>- **align**: alignment mode relative to the anchor component.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 146| center | { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) } | Vertical center alignment.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 147| bias<sup>11+</sup> | [Bias](#bias) | Offset of the component under the anchor constraints. The value is the ratio of the distance to the left/upper anchor to the total distance between anchors.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 11.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 148 149## LocalizedAlignRuleOptions<sup>12+</sup> 150 151**Atomic service API**: This API can be used in atomic services since API version 12. 152 153| Name | Type | Description | 154| ------ | ------------------------------------------------------------ | ------------------------------------------------------------ | 155| start | [LocalizedHorizontalAlignParam](#localizedhorizontalalignparam12) | Left alignment with left-to-right scripts and right alignment with right-to-left scripts in the horizontal direction.| 156| end | [LocalizedHorizontalAlignParam](#localizedhorizontalalignparam12) | Right alignment with left-to-right scripts and left alignment with right-to-left scripts in the horizontal direction.| 157| middle | [LocalizedHorizontalAlignParam](#localizedhorizontalalignparam12) | Center alignment in the horizontal direction.| 158| top | [LocalizedVerticalAlignParam](#localizedverticalalignparam12) | Top alignment in the vertical direction.| 159| bottom | [LocalizedVerticalAlignParam](#localizedverticalalignparam12) | Bottom alignment in the vertical direction.| 160| center | [LocalizedVerticalAlignParam](#localizedverticalalignparam12) | Center alignment in the vertical direction. | 161| bias | [Bias](#bias) | Offset of the component under the anchor constraints. The value is the ratio of the distance to the left/upper anchor to the total distance between anchors.| 162 163## LocalizedHorizontalAlignParam<sup>12+</sup> 164 165**Atomic service API**: This API can be used in atomic services since API version 12. 166 167| Name | Type | Description | 168| ------ | ------------------------------------------------------------ | ------------------------------------------------------------ | 169| anchor | string | ID of the component that serves as the anchor.| 170| align | [HorizontalAlign](ts-appendix-enums.md#horizontalalign) | Horizontal alignment mode relative to the anchor component.| 171 172## LocalizedVerticalAlignParam<sup>12+</sup> 173 174**Atomic service API**: This API can be used in atomic services since API version 12. 175 176| Name | Type | Description | 177| ------ | ------------------------------------------------------------ | ------------------------------------------------------------ | 178| anchor | string | ID of the component that serves as the anchor.| 179| align | [VerticalAlign](ts-appendix-enums.md#verticalalign) | Vertical alignment mode relative to the anchor component.| 180 181## Bias 182 183Defines the offset of the component under the anchor constraints. 184<br>In the horizontal direction, the value of **Bias** is the ratio of the distance from the component to the left anchor D<sub>start</sub> to the total distance between the component and the horizontal anchors D<sub>start</sub> + D<sub>end</sub>. In a mirrored language layout, D<sub>start</sub> is the distance from the component to the right anchor. The width of the component is represented by D<sub>width</sub>. 185<br> 186<br>Similarly, in the vertical direction, the value of **Bias** is the ratio of the distance from the component to the top anchor D<sub>top</sub> to the total distance between the component and the vertical anchors D<sub>top</sub> + D<sub>bottom</sub>. The height of the component is represented by D<sub>height</sub>. 187<br> 188 189 190**Atomic service API**: This API can be used in atomic services since API version 12. 191 192| Name | Type | Mandatory | Description | 193| ----- | ---------------------------------------- | ---- | ---------------------------------------- | 194| horizontal | number | No| Bias value in the horizontal direction.<br>This parameter takes effect when the child component has a correct width and two horizontal anchors.<br>Default value: **0.5**| 195| vertical | number | No| Bias value in the vertical direction.<br>This parameter takes effect when the child component has a correct height and two vertical anchors.<br>Default value: **0.5**| 196 197## chainMode<sup>12+</sup> 198 199chainMode(direction: Axis, style: ChainStyle) 200 201Sets the parameters of the chain in which the component is the head. This parameter has effect only when the parent container is [RelativeContainer](ts-container-relativecontainer.md). The chain head is the first component in the chain that satisfies the [chain formation rules](ts-container-relativecontainer.md#rules) (starting from the left in the horizontal direction, or from the right in a mirrored language layout; starting from the top in the vertical direction). 202For details, see [RelativeContainer Example 7](ts-container-relativecontainer.md#example-7-creating-chains). 203 204**System capability**: SystemCapability.ArkUI.ArkUI.Full 205 206**Parameters** 207 208| Name| Type | Mandatory| Description | 209| ------ | ------------------------------------------- | ---- | ------------------------ | 210| direction | [Axis](ts-appendix-enums.md#axis) | Yes | Direction of the chain.| 211| style | [ChainStyle](#chainstyle12) | Yes | Style of the chain.| 212 213## ChainStyle<sup>12+</sup> 214 215Enumerates the chain styles. 216 217**Atomic service API**: This API can be used in atomic services since API version 12. 218 219**System capability**: SystemCapability.ArkUI.ArkUI.Full 220 221| Name | Description | 222| ------------- | ------------------------------------------------------------ | 223| SPREAD | Child components are evenly distributed among constraint anchors. For details, see [RelativeContainer Example 7](ts-container-relativecontainer.md#example-7-creating-chains).| 224| SPREAD_INSIDE | All child components except the first and last ones are evenly distributed among constraint anchors. For details, see [RelativeContainer Example 7](ts-container-relativecontainer.md#example-7-creating-chains).| 225| PACKED | There is no gap between child components in the chain. For details, see [RelativeContainer Example 7](ts-container-relativecontainer.md#example-7-creating-chains).| 226 227## chainWeight<sup>14+</sup> 228 229chainWeight(chainWeight: ChainWeightOptions) 230 231Sets the weight of the component in a chain, which is used to re-lay out components that form the chain. This API has effect only when the parent container is [RelativeContainer](ts-container-relativecontainer.md). 232 233**System capability**: SystemCapability.ArkUI.ArkUI.Full 234 235**Atomic service API**: This API can be used in atomic services since API version 14. 236 237**Parameters** 238 239| Name| Type | Mandatory| Description | 240| ------ | ------------------------------------------- | ---- | ------------------------ | 241| chainWeight | [ChainWeightOptions](ts-types.md#chainweightoptions14) | Yes | Layout weight of the component in the horizontal or vertical direction. The component with **chainWeight** set will have its size in the horizontal or vertical direction allocated according to the set weights. The allocation ignores the component's intrinsic size and enables the component to adaptively fill the remaining space.| 242 243## Example 244 245### Example 1: Setting the Alignment Mode and Main Axis Layout 246 247This example demonstrates setting the alignment mode of content within a component and the layout of child components along the main axis of the parent container. 248 249```ts 250// xxx.ets 251@Entry 252@Component 253struct PositionExample1 { 254 build() { 255 Column() { 256 Column({ space: 10 }) { 257 // When the component content is within the area specified by the component width and height, set the alignment mode of the content in the component. 258 Text('align').fontSize(9).fontColor(0xCCCCCC).width('90%') 259 Stack() { 260 Text('First show in bottom end').height('65%').backgroundColor(0xD2B48C) 261 Text('Second show in bottom end').backgroundColor(0xF5DEB3).opacity(0.9) 262 }.width('90%').height(50).margin({ top: 5 }).backgroundColor(0xFFE4C4) 263 .align(Alignment.BottomEnd) 264 Stack() { 265 Text('top start') 266 }.width('90%').height(50).margin({ top: 5 }).backgroundColor(0xFFE4C4) 267 .align(Alignment.TopStart) 268 269 // To arrange the child components from left to right, set direction of the parent container to Direction.Ltr. 270 Text('direction').fontSize(9).fontColor(0xCCCCCC).width('90%') 271 Row() { 272 Text('1').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3) 273 Text('2').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C) 274 Text('3').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3) 275 Text('4').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C) 276 } 277 .width('90%') 278 .direction(Direction.Ltr) 279 // To arrange the child components from right to left, set direction of the parent container to Direction.Rtl. 280 Row() { 281 Text('1').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3).textAlign(TextAlign.End) 282 Text('2').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C).textAlign(TextAlign.End) 283 Text('3').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3).textAlign(TextAlign.End) 284 Text('4').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C).textAlign(TextAlign.End) 285 } 286 .width('90%') 287 .direction(Direction.Rtl) 288 } 289 } 290 .width('100%').margin({ top: 5 }) 291 } 292} 293``` 294 295 296 297### Example 2: Setting the Position Offset 298 299This example demonstrates position offsets based on the parent component, relative positioning, and anchors. 300 301```ts 302// xxx.ets 303@Entry 304@Component 305struct PositionExample2 { 306 build() { 307 Column({ space: 20 }) { 308 // Set the offset of the component's upper left corner relative to the parent component's upper left corner. 309 Text('position').fontSize(12).fontColor(0xCCCCCC).width('90%') 310 Row() { 311 Text('1').size({ width: '30%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 312 .textAlign(TextAlign.Center) 313 Text('2 position(30, 10)') 314 .size({ width: '60%', height: '30' }) 315 .backgroundColor(0xbbb2cb) 316 .border({ width: 1 }) 317 .fontSize(16) 318 .align(Alignment.Start) 319 .position({ x: 30, y: 10 }) 320 Text('3').size({ width: '45%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 321 .textAlign(TextAlign.Center) 322 Text('4 position(50%, 70%)') 323 .size({ width: '50%', height: '50' }) 324 .backgroundColor(0xbbb2cb) 325 .border({ width: 1 }) 326 .fontSize(16) 327 .position({ x: '50%', y: '70%' }) 328 }.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed }) 329 330 // Offset relative to the start point. x indicates the horizontal distance between the end point and the start point. If the value of x is greater than 0, the component is offset to the left. Otherwise, the component is offset to the right. 331 // y indicates the vertical distance between the end point and the start point. If the value of y is greater than 0, the component is offset to the top. Otherwise, the component is offset to the bottom. 332 Text('markAnchor').fontSize(12).fontColor(0xCCCCCC).width('90%') 333 Stack({ alignContent: Alignment.TopStart }) { 334 Row() 335 .size({ width: '100', height: '100' }) 336 .backgroundColor(0xdeb887) 337 Text('text') 338 .fontSize('30px') 339 .textAlign(TextAlign.Center) 340 .size({ width: 25, height: 25 }) 341 .backgroundColor(Color.Green) 342 .markAnchor({ x: 25, y: 25 }) 343 Text('text') 344 .fontSize('30px') 345 .textAlign(TextAlign.Center) 346 .size({ width: 25, height: 25 }) 347 .backgroundColor(Color.Green) 348 .markAnchor({ x: -100, y: -25 }) 349 Text('text') 350 .fontSize('30px') 351 .textAlign(TextAlign.Center) 352 .size({ width: 25, height: 25 }) 353 .backgroundColor(Color.Green) 354 .markAnchor({ x: 25, y: -25 }) 355 }.margin({ top: 25 }).border({ width: 1, style: BorderStyle.Dashed }) 356 357 // Offset of the component relative to itself. If the value of x is greater than 0, the component is offset to the right. Otherwise, the component is offset to the left. If the value of y is greater than 0, the component is offset to the bottom. Otherwise, the component is offset to the top. 358 Text('offset').fontSize(12).fontColor(0xCCCCCC).width('90%') 359 Row() { 360 Text('1').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 361 .textAlign(TextAlign.Center) 362 Text('2 offset(15, 30)') 363 .size({ width: 120, height: '50' }) 364 .backgroundColor(0xbbb2cb) 365 .border({ width: 1 }) 366 .fontSize(16) 367 .align(Alignment.Start) 368 .offset({ x: 15, y: 30 }) 369 Text('3').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 370 .textAlign(TextAlign.Center) 371 Text('4 offset(-5%, 20%)') 372 .size({ width: 100, height: '50' }) 373 .backgroundColor(0xbbb2cb) 374 .border({ width: 1 }) 375 .fontSize(16) 376 .offset({ x: '-5%', y: '20%' }) 377 }.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed }) 378 } 379 .width('100%').margin({ top: 25 }) 380 } 381} 382``` 383 384 385 386### Example 3: Setting the Absolute Positioning and Relative Offset 387 388This example demonstrates how to use **position** to set absolute positioning, which determines the position of child components relative to the parent component. It also shows how to use **offset** to set relative offsets, which moves components from their original layout positions. 389 390```ts 391// xxx.ets 392@Entry 393@Component 394struct Example3 { 395 build() { 396 Column({ space: 20 }){ 397 Text('position use Edges').fontSize(12).fontColor(0xCCCCCC).width('90%') 398 Row() { 399 Text('bottom:0, right:0').size({ width: '30%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 400 .textAlign(TextAlign.Center).position({bottom: 0, right: 0}) 401 Text('top:0, left:0').size({ width: '30%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 402 .textAlign(TextAlign.Center).position({top: 0, left: 0}) 403 Text('top:10%, left:50%').size({ width: '50%', height: '30' }).backgroundColor(0xbbb2cb).border({ width: 1 }).fontSize(16) 404 .textAlign(TextAlign.Center).position({ top: '10%', left: '50%' }) 405 Text('bottom:0, left:30').size({ width: '50%', height: '30' }).backgroundColor(0xbbb2cb).border({ width: 1 }).fontSize(16) 406 .textAlign(TextAlign.Center).position({ bottom: 0, left: 30 }) 407 }.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed }) 408 409 410 Text('offset use Edges').fontSize(12).fontColor(0xCCCCCC).width('90%') 411 Row() { 412 Text('1').size({ width: '25%', height: 50 }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 413 .textAlign(TextAlign.Center) 414 Text('2 top:30, left:0').size({ width: '25%', height: 50 }).backgroundColor(0xbbb2cb).border({ width: 1 }).fontSize(16) 415 .textAlign(TextAlign.Center).offset({top: 30, left: 0}) 416 Text('3').size({ width: '25%', height: 50 }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 417 .textAlign(TextAlign.Center) 418 Text('4 bottom:10, right:30').size({ width: '25%', height: 50 }).backgroundColor(0xbbb2cb).border({ width: 1 }).fontSize(12) 419 .textAlign(TextAlign.Center).offset({bottom: 10, right: 30}) 420 }.width('90%').height(150).border({ width: 1, style: BorderStyle.Dashed }) 421 }.width('100%').margin({ top: 25 }) 422 } 423} 424``` 425 426 427 428### Example 4: Implementing a Mirror Effect 429 430This example demonstrates how to implement a mirroring effect using **position**, **offset**, and **markAnchor** sequentially. The yellow blocks indicate the original effect, and the pink blocks indicate the mirroring effect. 431 432```ts 433// xxx.ets 434import { LengthMetrics } from '@kit.ArkUI'; 435@Entry 436@Component 437struct Example4 { 438 private scroller: Scroller = new Scroller() 439 440 build() { 441 Column() { 442 Stack({ alignContent: Alignment.End }) { 443 Scroll(this.scroller) { 444 Flex({ direction: FlexDirection.Column }) { 445 RelativeContainer() { 446 Row() { 447 } 448 .position({ start: LengthMetrics.px(200), top: LengthMetrics.px(100) }) 449 .width("30%") 450 .height("20%") 451 .backgroundColor(Color.Pink) 452 .padding(50) 453 .margin(50) 454 Row() { 455 } 456 .position({ left:'200px', top: '100px' }) 457 .width("30%") 458 .height("20%") 459 .backgroundColor(Color.Yellow) 460 .padding(50) 461 .margin(50) 462 Row() { 463 } 464 .offset({ start: LengthMetrics.vp(100), top: LengthMetrics.vp(200) }) 465 .width("30%") 466 .height("20%") 467 .backgroundColor(Color.Pink) 468 .padding(50) 469 .margin(50) 470 Row() { 471 } 472 .offset({ left: 100, top: 200 }) 473 .width("30%") 474 .height("20%") 475 .backgroundColor(Color.Yellow) 476 .padding(50) 477 .margin(50) 478 Row() { 479 } 480 .markAnchor({ start: LengthMetrics.fp(100), top: LengthMetrics.fp(-350) }) 481 .width("30%") 482 .height("20%") 483 .backgroundColor(Color.Pink) 484 .padding(50) 485 .margin(50) 486 Row() { 487 } 488 .markAnchor({ x: '100fp', y: '-350fp' }) 489 .width("30%") 490 .height("20%") 491 .backgroundColor(Color.Yellow) 492 .padding(50) 493 .margin(50) 494 } 495 .backgroundColor(Color.White) 496 .padding(50) 497 .margin(50) 498 } 499 } 500 .width('100%') 501 .scrollBar(BarState.Off) 502 .scrollable(ScrollDirection.Vertical) 503 504 ScrollBar({ scroller: this.scroller, direction: ScrollBarDirection.Vertical, state: BarState.Auto }) { 505 Text() 506 .width(20) 507 .height(100) 508 .borderRadius(10) 509 .backgroundColor('#C0C0C0') 510 }.width(20).backgroundColor('#ededed') 511 } 512 }.height('90%') 513 } 514} 515``` 516 517
