1# ArkUI Layout Development (ArkTS)
2
3
4## What should I do if the height settings in position do not take effect? (API version 9)
5
6**Solution**
7
8When **position** is set for a container component, it is taken out of normal flow and works independently from the outer container. In this case, the height does not take effect. You can replace the outer container with a stack to solve this issue.
9
10
11## How do I implement horizontal scrolling on a Grid component? (API version 9)
12
13Set **rowsTemplate** (the number of rows) for the **Grid** component and do not set **columnsTemplate** (the number of columns). In this way, the **Grid** component scrolls horizontally when its content does not fit within its width.
14
15
16## What should I do if the List component cannot be dragged to the bottom when it is used with another component and does not have the size specified? (API version 9)
17
18Add the **layoutWeight** attribute for the **List** component so that it takes up the remaining height (or width, depending on the scrolling direction). By default, the **List** component, as a scrollable container, takes up the entire screen height. When it is used with any component whose height is fixed, you need to explicitly add the **layoutWeight** attribute for the **List** component so that it takes up the remaining height instead of the entire screen height.
19
20
21## Can tab switching be disabled for the Tabs component? (API version 9)
22
23No. This feature is not supported.
24
25
26## How do I intercept the onBackPress event so that it does not trigger page return? (API version 9)
27
28If **true** is returned in **onBackPress**, the page executes its own return logic instead of the default return logic.
29
30**Reference**
31
32[Custom Component Lifecycle-onBackPress](../reference/apis-arkui/arkui-ts/ts-custom-component-lifecycle.md#onbackpress)
33
34
35## How do I implement a sticky header for a list item group in the List component? (API version 9)
36
37You can use the **sticky** attribute of the **List** component together with the **ListItemGroup** component. Specifically, set the **sticky** attribute of the **List** component to **StickyStyle.Header** and set the **header** parameter of the corresponding **ListItemGroup** component.
38
39**Reference**
40
41[Adding a Sticky Header](../ui/arkts-layout-development-create-list.md#adding-a-sticky-header)
42
43## How do I configure only specified UI components to move up to avoid the open keyboard? (API version 10)
44
45**Solution**
46
47 To configure the UI logic for keyboard avoidance, use **expandSafeArea**.
48
49**Reference**
50
51[Safe Area](../reference/apis-arkui/arkui-ts/ts-universal-attributes-expand-safe-area.md)
52
53## What methods are available for combining text and images? (API version 10)
54
55**Solution**
56
571. To display text with images, you can nest an **ImageSpan** component in a **Text** component; alternatively, nest **Text** and **Image** components in a container component (such as **Row** and **Column**). The former is recommended.
58
592. If editing is needed, use the **RichEditor** component.
60
61**Reference**
62
63[RichEditor](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md)
64
65## How do I implement a coordinated layout? (API version 10)
66
67**Solution**
68
69You can implement nested scrolling in a scrollable component with the **nestedScroll** attribute.
70
71**Reference**
72
73[Scroll](../reference/apis-arkui/arkui-ts/ts-container-scroll.md)
74
75## What should I do if the navigation bar is blocked when the sidebar is displayed? (API version 10)
76
77**Solution**
78
79Configure the navigation bar as the second child component, that is, the content area, of the **SideBarContainer** component. In this way, the sidebar takes up only its own width and does not block other part of the navigation bar.
80
81**Reference**
82
83[SideBarContainer](../reference/apis-arkui/arkui-ts/ts-container-sidebarcontainer.md)
84
85## What should I if the UI is not re-rendered with ForEach and LazyForEach when the data source is changed? (API version 10)
86
87**Solution**
88
89If the default key generator is used, the framework automatically generates a key based on **item** and **index**, that is, **(item: T, index: number) => { return index + '__' + JSON.stringify(item); }**. When the data source of a state variable is changed, **ForEach** or **LazyForEach** detects the key change, and triggers a component reconstruction to update the UI.
90
91**Reference**
92
93[ForEach: Rendering of Repeated Content](../quick-start/arkts-rendering-control-foreach.md)
94
95## How do I decouple a dialog box from pages? What are the best practices? (API 10)
96
97**Solution**
98
99A dialog box must be bound a component and triggered by events. Its content can be defined with a global builder. It only needs to be defined once.
100
101Global builder:
102
103Syntax:
104
105@Builder function MyGlobalBuilderFunction(){ ... }
106
107Usage:
108
109MyGlobalBuilderFunction()
110
111A custom global build function is accessible throughout the application. As such, it is recommended if no own state is involved.
112
113**Reference**
114
1151. [Custom Dialog Box (CustomDialog)](../reference/apis-arkui/arkui-ts/ts-methods-custom-dialog-box.md)
1162. [Popup Control](../reference/apis-arkui/arkui-ts/ts-universal-attributes-popup.md)
1173. [@Builder Decorator: Custom Builder Function](../quick-start/arkts-builder.md)
118
119## What should I do if there are white and dark lines between two adjacent components of the same color? (API version 11)
120
121**Solution**
122
123If the boundaries of adjacent components with the same color fall on floating-point coordinates, a seemingly white or dark line appears after anti-aliasing processing is performed at the graphics layer. To fix this issue, set the universal attribute **pixelRound**
124so that the component boundaries on both sides of the white and dark lines are aligned with the integer pixel coordinates.
125
126Usage:
127```ts
128Flex(){
129    Column().height('30%').width('30%').backgroundColor(Color.Blue)
130        .pixelRound({end: PixelRoundCalcPolicy.FORCE_CEIL})
131    Column().height('30%').width('30%').backgroundColor(Color.Blue)
132    Column().height('30%').width('30%').backgroundColor(Color.Blue)
133}
134```
135
136**Reference**
137[Layout Constraints](../reference/apis-arkui/arkui-ts/ts-universal-attributes-layout-constraints.md)
138