HarmonyOS Flex在特定布局下如何添加间距

使用Flex进行布局，最多4列，子视图高度固定，宽度最小25%，最大100%，宽度适配内容长度，现在想添加子视图之间的水平间距会导致显示不了4列（使用的Flex入参space），该如何添加间距且保证最多能显示4列

HarmonyOS

zxjiu

2024-12-24 18:21:13

浏览

回答 1

待解决

回答 1

按赞同

按时间

superinsect

可以通过获取屏幕宽度，然后计算出适合的最小宽度，动态设置参考

demo:

let windowClass = await window.getLastWindow(getContext());
// 获取窗口属性
let properties = windowClass.getWindowProperties();
let www = px2vp(properties.windowRect.width)
this.w = Math.floor(((www - 24)/4/www)*100) + '%'

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5#getwindowproperties9

2024-12-24 20:15:16

如何写精华回答，获更多曝光？

发布

相关问题

HarmonyOS flex 流式布局内部组件换行怎么控制换行的间距？

1201浏览 • 1回复待解决

HarmonyOS flex容器布局

3355浏览 • 2回复待解决

HarmonyOS Flex布局如何设置最大行数

1410浏览 • 1回复待解决

#鸿蒙通关秘籍#如何通过Flex布局在ArkTS中实现网格样式的布局？

1429浏览 • 1回复待解决

如何优化Flex的布局性能

1652浏览 • 1回复待解决

HarmonyOS Flex 布局设置问题

1865浏览 • 1回复待解决

#鸿蒙通关秘籍#在Grid布局中如何设置行列之间的间距？

1030浏览 • 1回复待解决

#鸿蒙通关秘籍#在鸿蒙栅格布局中如何设置子组件的间距？

1717浏览 • 1回复待解决

#鸿蒙通关秘籍#在鸿蒙开发中如何优化Flex布局的性能？

1372浏览 • 1回复待解决

自定义Grid布局项间距异常

726浏览 • 0回复待解决

#鸿蒙通关秘籍#Flex布局如何控制换行？

1416浏览 • 1回复待解决

Flex布局完全替代column、row

1519浏览 • 2回复待解决

#鸿蒙通关秘籍#栅格布局中的列间距和边距在鸿蒙开发中如何设置？

1227浏览 • 1回复待解决

#鸿蒙通关秘籍# 在HarmonyOS Next中使用Flex组件进行图片布局时，如何自定义列数来实现不同的布局效果？

979浏览 • 0回复待解决

#鸿蒙通关秘籍#如何设置WaterFlow组件的布局方向和间距？

1459浏览 • 1回复待解决

层叠布局,层叠布局在容器内的不同属性下的布局效果

1724浏览 • 1回复待解决

Flex布局与w3c中的flex是否有差异

2156浏览 • 1回复待解决

HarmonyOS flex布局与线性布局相比，是否性能较差，是否更推荐使用线性布局？

1180浏览 • 1回复待解决

#鸿蒙通关秘籍#如何设置鸿蒙Flex布局在交叉轴方向上内容均匀分布？

1167浏览 • 1回复待解决

弹性布局，布局在不同属性下的布局效果以及对应属性

1827浏览 • 1回复待解决

#鸿蒙通关秘籍#在鸿蒙中如何让Flex布局的子元素超出空间时缩小自己？

1180浏览 • 1回复待解决

HarmonyOS ArkUI是否有类似CSS中的Flex布局？

1232浏览 • 1回复待解决

HarmonyOS flex布局中如何实现子元素将剩余的空间填满

1804浏览 • 1回复待解决

HarmonyOS Flex布局，中间内容多时两侧内容变形问题

1240浏览 • 1回复待解决

ArkUI的Flex布局和Grid布局分别适用于什么场景？

617浏览 • 0回复待解决

51CTO

51CTO博客

51CTO学堂

HarmonyOS Flex在特定布局下如何添加间距

订阅鸿蒙技术特刊，精选内容抢先看