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

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

HarmonyOS

zxjiu

2天前

浏览

回答 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

2天前

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

发布

相关问题

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

80浏览 • 1回复待解决

HarmonyOS flex容器布局

973浏览 • 2回复待解决

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

54浏览 • 1回复待解决

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

138浏览 • 1回复待解决

如何优化Flex的布局性能

562浏览 • 1回复待解决

HarmonyOS Flex 布局设置问题

494浏览 • 1回复待解决

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

95浏览 • 1回复待解决

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

113浏览 • 1回复待解决

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

141浏览 • 1回复待解决

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

155浏览 • 1回复待解决

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

123浏览 • 0回复待解决

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

696浏览 • 1回复待解决

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

102浏览 • 1回复待解决

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

975浏览 • 1回复待解决

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

709浏览 • 1回复待解决

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

108浏览 • 1回复待解决

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

106浏览 • 1回复待解决

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

10浏览 • 1回复待解决

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

148浏览 • 1回复待解决

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

278浏览 • 1回复待解决

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

34浏览 • 1回复待解决

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

292浏览 • 1回复待解决

#鸿蒙通关秘籍# 在HarmonyOS NEXT中如何使用Flex和Stack布局实现复杂的组件对齐和叠加效果？

139浏览 • 0回复待解决

HarmonyOS flex有inline-flex 或者 flex 宽度跟随内容宽度的办法

474浏览 • 1回复待解决

HarmonyOS 如何实现Flex布局内容收起只显示1行，展开最多显示6行

22浏览 • 1回复待解决

51CTO

51CTO博客

51CTO学堂

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

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