Flex 弹性布局

Creator 3.x
#1

演示地址 Cocos Creator | flex
视频演示 CocosCreator Flex弹性布局组件_哔哩哔哩_bilibili

最近写了一个cocos版本的Flex布局组件，完全和css的Flex用法一样，理论上可以实现任意种布局方式。可以无限嵌套使用
目前组件已经挂商店了 Flex 弹性布局 | Cocos Store
支持2.x 3.x

截屏2022-01-17 下午9.53.10
截屏2022-01-17 下午9.53.101810×1156 212 KB

截屏2022-01-17 下午9.53.51
截屏2022-01-17 下午9.53.511636×870 75 KB

image
image1706×1656 181 KB

这里重点说下和css的flex没有的参数

Size

  • 容器的基础尺寸 如果不设置 就相当于css 的 width:auto height:auto

AsyncCalculate

  • 作用是下一帧计算，当这个容器发生改变时 如果会它会影响其他容器时 需要让父容器重新计算，这个重新计算的过程可以放到下一帧进行，缺点就是会闪一下，因为不是同一帧计算的

isContainer

  • 根容器默认是true 子容器默认是false 如果勾选为true 那么这个节点就会认为是一个容器，当你往这个几点下面添加自己子节点时 就会自动布局

Wrap-Before

  • 勾选之后 会让当前节点强制切换到下一行，此时会忽略Flex-Wrap的设置
21赞
【UI 相关技术背景 随缘调查】
几个UI问题, layout, size相关.
#2

很棒 :+1: :+1: :+1:

1赞
#3

我感觉你比官方有远见。官方的layout太鸡肋了

3赞
#4

这个必须顶

#5

赞，布局真的很重要

#6
#7

你好，这个布局扩展犀利，点赞。看了 demo ，请问下单一子元素的 flex 1 的特性怎么调出来，是不是上图中 isFixedSize 这个配置，尚未开放？期盼再完善一下 demo :+1:

1赞
#8

点赞Mark

#9

还在完善中 点击某个item 就可以调他的参数

#10

我之前提过layout要改进，还被嘲讽“要不官方给你做出全部功能好了”。。。我真的很无语，连web上面这么常用的layout布局都没几个，。。真的该好好反省下，怎么说都10多年了，一成不变可不行。还有button，真的太基础了这个功能。。。

1赞
#11

强烈建议做成引擎组件

1赞
#12

对以前用HTML开发的我这个小菜鸟,我感觉这个Flex真的很赞,期待您的成品 :smiley: :smiley:

#13

棒棒哒:100:，感觉比layout好用。

#14

可以可以。加油。

#15

是打算做成扩展卖 还是 开源？

#16

卖给官方吧，不然官方可能要2023年才能花心思在这上面:point_up_2:t2:

#17

建议做成引擎组件

#18

建议做成官方组件

#19

这个东西用JS写性能应该是不行的；
另外，游戏里用到布局还是比较少的；
做APP的话，原生更好用。
实用的地方还有待开发，在实际的游戏里都不是很规则，强行用FLEX模型还是不太容易，还需要结合绝对定位，相对定位等各种玩法了，那搞出来就是一个html渲染器了。
这是一个坑，还深不见底。

1赞
#20

多年以前FLASH做游戏和动画 没有布局这些东西（也不太需要），后来做RIA 互动应用，引入了布局这些组件。但是最后到FLASH被干掉也没发展出怎么样。。。 cocos的话真没有必要往看得见的老路上走

1赞