应用平台桌面菜单由常规拖放,换成ht.Grid布局操作步骤

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中图标大小!)

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IOTOS

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值