1# Component-Level Pixel Rounding 2 3Component-level pixel rounding allows you to enable or disable system pixel rounding for individual components by simply setting the **pixelRound** attribute. 4 5> **NOTE** 6> 7> The initial APIs of this module are supported since API version 11. Updates will be marked with a superscript to indicate their earliest API version. 8 9## pixelRound 10 11pixelRound(value: PixelRoundPolicy): T 12 13Sets the pixel rounding policy for the current component in the specified direction. If a direction is not set, the pixels are rounded to the nearest whole number in that direction. 14 15> **NOTE** 16> 17> In API version 11, this API uses half-pixel alignment (that is, 0\-0.25 rounds to 0, 0.25\-0.75 rounds to 0.5, 0.75\-1.0 rounds to 1). Since API version 12, this API rounds pixels to the nearest integers and allows you to disable pixel rounding for individual components. 18 19In normal calculations, the vertical direction (top and bottom) correspond to the component height, and the horizontal direction (the starting direction of mirroring is considered "left") correspond to the component width. For ease of description, these two sets of directions are referred to as top-left and bottom-right. 20 21- Calculate the top-left coordinates of the current component: offset of the top-left corner relative to the parent container. 22- Calculate the bottom-right coordinates of the current component: offset of the top-left corner relative to the parent container plus the size of the component itself. 23- Recalculate the size of the current component: bottom-right corner rounded value minus the top-left corner rounded value. 24 25**Widget capability**: This API can be used in ArkTS widgets since API version 11. 26 27**Atomic service API**: This API can be used in atomic services since API version 11. 28 29**System capability**: SystemCapability.ArkUI.ArkUI.Full 30 31**Parameters** 32 33| Name| Type | Mandatory| Description | 34| ------ | ------ | ---- | ------------------------------------------------------------ | 35| value | [PixelRoundPolicy](ts-types.md#pixelroundpolicy11) | Yes| Rounding policy for the bounds of the component.<br>**NOTE**<br>This attribute is applicable in scenarios where artifacts occur due to floating-point drawing. The rounding result is related not only to the component's width and height but also to its position. Even if the component's width and height are set to be the same, due to different floating-point positions described, the final width and height of the component may also be different after rounding.| 36 37**Return value** 38 39| Type| Description| 40| --- | --- | 41| T | Current component.| 42 43## FAQs 44 45| Issue | Solution | 46| ------------------------------------------------------------ | ------------------------------------------------------------ | 47| When a child component completely fills its parent container, and the offset and size cause the parent container to round up while the child component rounds down, there is a 1 px gap revealed in the parent container.| 1. Use the ceil rounding method for the child component in the direction where the gap is revealed.<br>2. Disable pixel rounding for both parent and child components.| 48| When a **List** component is used with dividers set, the dividers disappear under specific cases. | 1. Set a 2 px space on the **List** component.<br>2. Disable pixel rounding on the corresponding components.| 49| Overlapping occurs on specific devices. | 1. Set a 2 px space on the **List** component.<br>2. Disable pixel rounding on the component.<br>3. Obtain the DPI value of the device through media query APIs and implement customized adaptation.| 50| When a component rendered with an animation, there is a slight flicker. | Disable pixel rounding on the corresponding components. | 51| The layout within a container is compact, and the sizes of child components are inconsistent. | Disable pixel rounding on the corresponding components. | 52 53## Example 54 55This example shows how to use **pixelRound** to guide layout adjustments when there is a 1 px gap in the parent component. 56 57```ts 58@Entry 59@Component 60struct PixelRoundExample { 61 @State curWidth : number = 300; 62 63 build() { 64 Column() { 65 Button(){ 66 Text(this.curWidth.toString()) 67 } 68 .onClick(() => { 69 this.curWidth += 0.1; 70 }) 71 .height(200) 72 .width(200) 73 .backgroundColor('rgb(213, 213, 213)') 74 75 Blank().height(20) 76 77 Row() { 78 Row() { 79 } 80 .width('100%') 81 .height('100%') 82 .backgroundColor(Color.Yellow) 83 .pixelRound({ 84 start : PixelRoundCalcPolicy.NO_FORCE_ROUND, 85 end : PixelRoundCalcPolicy.NO_FORCE_ROUND, 86 }) 87 } 88 .width(this.curWidth.toString() + 'px') 89 .height('300.6px') 90 .backgroundColor(Color.Red) 91 .pixelRound({ 92 start : PixelRoundCalcPolicy.NO_FORCE_ROUND, 93 end : PixelRoundCalcPolicy.NO_FORCE_ROUND, 94 }) 95 } 96 .width("100%") 97 .height('100%') 98 .backgroundColor('#ffe5e5e5') 99 } 100} 101``` 102 103In this example, when pixel rounding is initially disabled (that is, the **pixelRound** attribute is not set on the parent and child components), the component appearance is normal. You can increase the width of the parent component by clicking the button. The initial width is set at 301.2 px to provide a baseline for observing visual changes. As you increase the width, you may notice that at certain widths, a 1 px gap appears on the right side of the parent component. You can modify the example code to perform similar tests in the vertical dimension to see whether a similar issue occurs when the height of the components is changed. 104 105**Figure 1** Layout with pixelRound 106 107 108 109**Figure 2** Layout without pixelRound 110 111 112
