1# ArkUI布局开发常见问题(ArkTS)
2
3
4## 使用position之后height不生效(API 9)
5
6**解决措施**
7
8容器组件在使用position之后会脱离文本流，导致容器脱离外层容器束缚，导致height不生效，可以将外层容器换成Stack可以解决这个问题。
9
10
11## Grid组件如何实现横向滚动(API 9)
12
13将Grid组件设置当前网格布局行数rowsTemplate且不设置列数，当内容超出Grid组件宽度时，Grid可横向滚动进行内容展示。
14
15
16## List组件与其他组件并列使用时，若未设置List滚动方向上的尺寸，无法拖动到底部(API 9)
17
18给List加上layoutWeight属性，设置列表自适应占满剩余高度。原理：List属于可滚动容器组件，默认高度是占满全屏幕高度，当出现其他固定高度的组件占领了屏幕的部分高度时，需要开发人员显性的指定List组件占满剩余高度，而不是全屏幕高度。
19
20
21## Tabs组件在点击Tab项时是否支持禁止切换(API 9)
22
23不支持。
24
25
26## 如何拦截住onBackPress事件，不触发页面返回(API 9)
27
28在onBackPress中返回true表示页面自己处理返回逻辑，不会执行默认的返回逻辑。
29
30**参考链接**
31
32[自定义组件的生命周期-onBackPress](../reference/apis-arkui/arkui-ts/ts-custom-component-lifecycle.md#onbackpress)
33
34
35## List组件怎么实现分组列表的粘性标题效果(API 9)
36
37可以通过List组件的sticky属性配合ListItemGroup组件来实现。通过给List组件设置sticky属性为StickyStyle.Header，设置ListItemGroup中header参数对应的头部组件呈现粘性标题效果
38
39**参考链接**
40
41[创建列表-添加粘性标题](../ui/arkts-layout-development-create-list.md#添加粘性标题)
42
43## 键盘弹出时如何只让指定UI组件进行上移，而不是整体布局(API 10)
44
45**解决措施**
46
47 键盘弹出时的避让可以利用安全区域接口expandSafeArea进行UI逻辑避让控制。
48
49**参考链接**
50
51[安全区域](../reference/apis-arkui/arkui-ts/ts-universal-attributes-expand-safe-area.md)
52
53## 有哪些实现图文混排的方式，每种方式的优劣点是什么，推荐场景是什么(API 10)
54
55**解决措施**
56
571、如果做页面展示，可通过Text嵌套ImageSpan或者容器组件如Row、Colunm下嵌套Text&Image组件，推荐前者；
58
592、如果要进行编辑，可使用RichEditor控件。
60
61**参考链接**
62
63[图文混排](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md)
64
65## 如何实现协调布局的效果(API 10)
66
67**解决措施**
68
69可滚动类组件可以使用nestedScroll属性设置嵌套滚动。
70
71**参考链接**
72
73[Scroll](../reference/apis-arkui/arkui-ts/ts-container-scroll.md)
74
75## 如何解决sidebar侧边栏出现时，遮挡住下方的导航栏的问题(API 10)
76
77**解决措施**
78
79将被遮挡的导航栏作为SideBarContainer组件的第二个子组件使用，使其成为内容区的一部分，SideBarContainer的侧边栏只会遮挡内容区自身宽度的部分，其余部分可以正常看到。
80
81**参考链接**
82
83[SideBarContainer](../reference/apis-arkui/arkui-ts/ts-container-sidebarcontainer.md)
84
85## 如何解决使用foreach&lazyforeach循环渲染时，会出现更改数据源时，界面不刷新的问题(API 10)
86
87**解决措施**
88
89如果缺省keyGenerator，框架会自动基于item和index生成key， 如果函数缺省，框架默认的键值生成函数为(item: T, index: number) => { return index + '__' + JSON.stringify(item); }， 修改状态变量数据源时，ForEach或LazyForEach会捕捉到key的变化，从而通过重建组件节点来刷新。
90
91**参考链接**
92
93[ForEach：循环渲染](../quick-start/arkts-rendering-control-foreach.md)
94
95## CustomDialog，Popup等弹窗如何与页面解耦，最佳实践是什么样的(API 10)
96
97**解决措施**
98
99弹框类组件需要绑定到对应组件上，由事件触发。对于内容可以使用全局builder，只需定义一次。
100
101全局builder：
102
103定义的语法：
104
105@Builder function MyGlobalBuilderFunction(){ ... }
106
107使用方法：
108
109MyGlobalBuilderFunction()
110
111全局的自定义构建函数可以被整个应用获取。如果不涉及组件状态变化，建议使用全局的自定义构建方法。
112
113**参考链接**
114
1151. [自定义弹窗（CustomDialog）](../reference/apis-arkui/arkui-ts/ts-methods-custom-dialog-box.md)
1162. [Popup控制](../reference/apis-arkui/arkui-ts/ts-universal-attributes-popup.md)
1173. [@Builder装饰器：自定义构建函数](../quick-start/arkts-builder.md)
118
119## 为什么两个紧挨着的相同颜色的控件之间会有白线、暗线。如何解决(API 11)
120
121**解决措施**
122
123白线、暗线通常是因为相邻的同色控件边界落在了浮点数坐标上，图形层做了抗锯齿处理，视觉上产生了一条白线或暗线。可以通过pixelRound通用属性设置，
124使产生白线、暗线两侧的组件边界对齐到整数像素坐标上。
125
126使用方法：
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**参考链接**
137[布局约束](../reference/apis-arkui/arkui-ts/ts-universal-attributes-layout-constraints.md)
138