前提知识:
stylebox就像一个贴图,把图案贴到控件是。多个stylebox同时生效的话,那当然也有层级之分,上层覆盖下层(可以设置透明度来显示下层)
关于主题的概念:
godot——主题、Theme、StyleBox-CSDN博客
一、素材与实现效果
下面是我准备的图片,和期望的效果 。目标控件是 itemlist
二、实现步骤
1. 添加在 selected focus 状态时的样式,新建 styleboxTexture
2. 然后载入图片
3. 然后调整Texture Margins (TM) 属性,使箭头图案出现在九宫格的边缘
通常来说,只需设置TM和Texture这两个属性就够用了。
下面附上说明图解(不用关注其它属性的改动)
下面是更干净的图,真的只修改了这两个属性
Tips: 在将 stylebox 贴到 item 上时 1379 号格子不会被拉伸;5 号格子会被完全拉伸;28 号格子只会被水平拉伸;46 号格子只会被垂直拉伸。
三、一些会遇到的坑
下面的回答,为了方便理解,有一些细节方面的问题。相信在实践过程中会自行克服。
Q1.在预览页面中,我的图标还是变形了呀。就像图2中所示。
A1. 不用管它,只要保证图标在边框内部即可。因为最后效果是要根据你的实际itemlist控件的item大小来定的。
Q2. 我如Q1所说,保证了图标在边框内部,但实际效果还是被拉长变形了呀,达不到目标效果。
A2. 这是因为 itemlist 中的 item 的行高只有 10px ,而图案的高度有 20px 。为了把九宫格stylebox贴到item上,只能把它压扁了。想要解决也很简单:1. 把图案等比缩小到高度只有10px以下 2. 增大item的行高到20px以上。
Q3. 可以讲讲你 图1 中的预览效果里,为什么有两个箭头图案吗。
A3. 这是 Axis Stretch 属性在作怪。Axis Stretch 规定了当尺寸不匹配时,应该怎么做。像Q2中提到的那种情况,处于6号格子的图案的高度,与item的高度不一致,根据stretch模式,他就被压缩了。 还有一种Tile模式,即平铺模式。该模式下,若item高度小于图案高度,则会把图案“截断”(如0.8个箭头);反之,则会把图案复制一份并平铺(如2.4个箭头)