godot--自定义边框/选中时样式 StyleBoxTexture

前提知识：

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个箭头）