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)
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 top and bottom directions correspond to the component height, and the left and right directions (the starting direction of mirroring is called left) and width correspond to each other. For ease of description, these two sets of directions are referred to as upper left and lower right.
20
21- Calculate the upper left corner coordinates of the current component: offset of the upper left corner relative to the parent container.
22- Calculate the lower right corner coordinates of the current component: offset of the upper left corner relative to the parent container plus the size of the component itself.
23- Recalculate the size of the current component: lower right corner rounded value minus the upper 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## FAQs
38
39| Issue                                                    | Solution                                                    |
40| ------------------------------------------------------------ | ------------------------------------------------------------ |
41| 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.|
42| 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.|
43| 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.|
44| When a component rendered with an animation, there is a slight flicker.                            | Disable pixel rounding on the corresponding components.                                  |
45| The layout within a container is compact, and the sizes of child components are inconsistent.                          | Disable pixel rounding on the corresponding components.                                  |
46
47## Example
48
49This example shows how to use **pixelRound** to guide layout adjustments when there is a 1 px gap in the parent component.
50
51```ts
52@Entry
53@Component
54struct PixelRoundExample {
55    @State curWidth : number = 300;
56
57    build() {
58        Column() {
59            Button(){
60                Text(this.curWidth.toString())
61            }
62            .onClick(() => {
63                this.curWidth += 0.1;
64            })
65            .height(200)
66            .width(200)
67            .backgroundColor('rgb(213, 213, 213)')
68
69            Blank().height(20)
70
71            Row() {
72                Row() {
73                }
74                .width('100%')
75                .height('100%')
76                .backgroundColor(Color.Yellow)
77                .pixelRound({
78                    start : PixelRoundCalcPolicy.NO_FORCE_ROUND,
79                    end : PixelRoundCalcPolicy.NO_FORCE_ROUND,
80                })
81            }
82            .width(this.curWidth.toString() + 'px')
83            .height('300.6px')
84            .backgroundColor(Color.Red)
85            .pixelRound({
86                start : PixelRoundCalcPolicy.NO_FORCE_ROUND,
87                end : PixelRoundCalcPolicy.NO_FORCE_ROUND,
88            })
89        }
90        .width("100%")
91        .height('100%')
92        .backgroundColor('#ffe5e5e5')
93    }
94}
95```
96
97In 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.
98
99**Figure 1** Layout with pixelRound
100
101![en-us_image_pixel_round_enable.png](figures/en-us_image_pixel_round_enable.png)
102
103**Figure 2** Layout without pixelRound
104
105![en-us_image_pixel_round_disable.png](figures/en-us_image_pixel_round_disable.png)
106