ArkUI布局开发常见问题(ArkTS)

使用position之后height不生效

适用于 OpenHarmony 3.2 Beta5 API 9

解决措施

容器组件在使用position之后会脱离文本流,导致容器脱离外层容器束缚,导致height不生效,可以将外层容器换成Stack可以解决这个问题。

Grid组件如何实现横向滚动

适用于 OpenHarmony 3.2 Beta5 API 9

将Grid组件设置当前网格布局行数rowsTemplate且不设置列数,当内容超出Grid组件宽度时,Grid可横向滚动进行内容展示。

List组件与其他组件并列使用时,若未设置List滚动方向上的尺寸,无法拖动到底部

适用于 OpenHarmony 3.2 Beta5 API 9

给List加上layoutWeight属性,设置列表自适应占满剩余高度。原理:List属于可滚动容器组件,默认高度是占满全屏幕高度,当出现其他固定高度的组件占领了屏幕的部分高度时,需要开发人员显性的指定List组件占满剩余高度,而不是全屏幕高度。

Tabs组件在点击Tab项时是否支持禁止切换

适用于 OpenHarmony 3.2 Release API 9

不支持。

如何拦截住onBackPress事件,不触发页面返回

适用于 OpenHarmony 3.2 Release API 9

在onBackPress中返回true表示页面自己处理返回逻辑,不会执行默认的返回逻辑。

可参考自定义组件的生命周期-onBackPress

List组件怎么实现分组列表的粘性标题效果

适用于 OpenHarmony 3.2 Release API 9

可以通过List组件的sticky属性配合ListItemGroup组件来实现。通过给List组件设置sticky属性为StickyStyle.Header,设置ListItemGroup中header参数对应的头部组件呈现粘性标题效果

可参考:创建列表-添加粘性标题

键盘弹出时如何只让指定UI组件进行上移,而不是整体布局

适用于 OpenHarmony 4.0 Release API 10

解决措施

键盘弹出时的避让可以利用安全区域接口expandSafeArea进行UI逻辑避让控制。

参考链接

安全区域

有哪些实现图文混排的方式,每种方式的优劣点是什么,推荐场景是什么

适用于 OpenHarmony 4.0 Release API 10

解决措施

1、如果做页面展示,可通过Text嵌套ImageSpan或者容器组件如Row、Colunm下嵌套Text&Image组件,推荐前者;

2、如果要进行编辑,可使用RichEditor控件。

参考链接

图文混排

如何实现类似安卓协调布局CoordinateLayout的效果

适用于 OpenHarmony 4.0 Release API 10

解决措施

可滚动类组件可以使用nestedScroll属性设置嵌套滚动。

参考链接

Scroll

如何解决sidebar侧边栏出现时,遮挡住下方的导航栏的问题?希望能自行控制侧边栏的上下层级

适用于 OpenHarmony 4.0 Release API 10

解决措施

将被遮挡的导航栏作为SideBarContainer组件的第二个子组件使用,使其成为内容区的一部分,SideBarContainer的侧边栏只会遮挡内容区自身宽度的部分,其余部分可以正常看到。

参考链接

SideBarContainer

如何解决使用foreach&lazyforeach循环渲染时,会出现更改数据源时,界面不刷新的情况

适用于 OpenHarmony 4.0 Release API 10

解决措施

如果缺省keyGenerator,框架会自动基于item和index生成key, 如果函数缺省,框架默认的键值生成函数为(item: T, index: number) => { return index + '__' + JSON.stringify(item); }, 修改状态变量数据源时,ForEach或LazyForEach会捕捉到key的变化,从而通过重建组件节点来刷新。

参考链接

ForEach:循环渲染

CustomDialog,Popup等弹窗如何与页面解耦,最佳实践是什么样的(API 10)

解决措施

弹框类组件需要绑定到对应组件上,由事件触发。对于内容可以使用全局builder,只需定义一次。

全局builder:

定义的语法:

@Builder function MyGlobalBuilderFunction(){ ... }

使用方法:

MyGlobalBuilderFunction()

全局的自定义构建函数可以被整个应用获取。如果不涉及组件状态变化,建议使用全局的自定义构建方法。

参考链接

  1. 自定义弹窗(CustomDialog)
  2. Popup控制
  3. @Builder装饰器:自定义构建函数