Flex 弹性布局

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

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



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

Size

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

AsyncCalculate

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

isContainer

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

Wrap-Before

  • 勾选之后 会让当前节点强制切换到下一行,此时会忽略Flex-Wrap的设置
18赞

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

1赞

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

2赞

这个必须顶

赞,布局真的很重要

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

1赞

点赞Mark

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

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

1赞

强烈建议做成引擎组件

1赞

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

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

可以可以。加油。

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

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

建议做成引擎组件

建议做成官方组件

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

1赞

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

1赞