7、探索界面样式与组件配置：打造多设备适配应用

探索界面样式与组件配置：打造多设备适配应用

1. 界面样式设计

在设计应用界面时，我们可以利用 Sencha Touch 的强大功能来定制样式。首先，我们可以通过修改图标样式来改变界面的视觉效果。将代码中的某一行替换为 iconCls: 'bolt' ，保存更改并重新加载页面，就能看到新的图标。别忘了在命令行使用 compass compile 重新编译 SASS 文件。

我们还可以添加自定义的遮罩文件。只需将透明的黑色图标 PNG 文件放在 /lib/resources/themes/images/default/pictos 文件夹中，然后在 SASS 文件中使用 pictos-iconmask 混合函数调用它们，并在 JS 文件中添加相应的 iconCls 配置选项。

1.1 变量的使用

每个组件都有可用的变量，用于控制特定的颜色、大小和外观选项。与混合函数不同，变量针对组件的单个设置。例如，按钮组件包含以下变量：
| 变量名 | 作用 |
| ---- | ---- |
| $button-gradient | 所有按钮的默认渐变 |
| $button-height | 所有按钮的默认高度 |
| $button-radius | 所有按钮的默认边框半径 |
| $button-stroke-weight | 所有按钮的默