1. 显示目前apps节点下所有图标(因为有隐藏)
2. 显示全屏铺满的根节点边框,便于让ht.Grid对齐
3. 工具栏网格图元放到图纸上调整appIcon归属到其节点下
工具栏中点击网格图元,到图纸中划定区域创建ht.Grid实例对象。相对于点击、划定矩形区域创建实例,图标是拖放操作且当前对于网格,内置图标是给工具栏图标用的,不能直接拖放进来。
随后把此前组合的appIcon,全选拖放到网格/格栅节点下,并删除此前的节点。
4. 调整网格图元矩形区域边框线跟根节点重合并布局
重合边框线大小调整成一致,并且拖放根节点到网格图元的“吸附节点”属性上,在自动展开的布局属性中,设置为“左&右”、“上&下”,让动态尺寸变化的时候,都能保持大小动态跟全屏铺满的图纸一致。
随后设置根节点、网格节点的边框宽度都为0,不可见!
5. 设置网格图标关键几个属性,保持跟其他菜单页设置一致
图标依次从左到右、自上往下按照网格节点下的appIcon进行逐个对应(注意目前是人为划定m×n的格子让图标对号入座当频幕缩放时自动缩放,没有就着图标的固定尺寸通过动态设定横纵向格子数来适应屏幕尺寸的动态变化),如下图示例:
grid.row.count设置为5,行数即区域横向划分多少等份,没有的留空
grid.column.count设置为8,列数即区域纵向划分多少等份,没有的留空
grid.border设置为50,用以设定整体菜单区域局域边框的内边距!
grid.gap设置为30,用以设定图标间隙,同时也实现了控制图标的大小尺寸
注意,不论是grid.gap还是attach.padding都可以设置图标之间的间距来控制图标大小,但是这种方式控制大小会导致不同频幕尺寸时,图标有的时候会挤压非常小!如果默认保持这两项为0,那么缩放可以自然按照区域比例缩放,不会出现严重挤压的情况!
所以目前控制图标大小,就利用symblol图标icon本身留有边距来实现!(如果有需要,可以把边距固定暴露成数据绑定,动态配置甚至全局配置边距,以此实现控制menu中图标大小!)