16、GTK+ 样式定制全解析

GTK+ 样式定制全解析

1. GTK+ 样式定制概述

GTK+ 提供了多种定制小部件样式的方法，大多数小部件样式的定制是通过样式属性和资源（RC）文件来完成的。

1.1 小部件状态

在定制样式时，需要指定小部件的状态，主要有以下五种：
- NORMAL ：小部件正常运行时的状态。
- ACTIVE ：活动小部件的状态，例如切换开关被按下时。
- PRELIGHT ：鼠标指针悬停在小部件上，小部件会响应按钮点击。
- SELECTED ：小部件或小部件文本被选中。
- INSENSITIVE ：小部件被禁用，不会响应用户操作。

1.2 颜色指定格式

颜色可以用多种格式指定：
- 十六进制格式，如 #RGB、#RRGGBB、#RRRGGGBBB 和 #RRRRGGGGBBBB，其中 R、G、B 分别代表红、绿、蓝的十六进制值。
- 以 { R, G, B } 的形式指定，值可以是 0 到 65,535 之间的整数，也可以是 0.0 到 1.0 之间的浮点数。

2. 默认 RC 文件样式

表 1 列出了截至 GTK+ 2.10 支持的默认 RC 文件样式：
| 样式 | 描述 | 示例 |
| ---- | ---- | ---- |
| base[state] | 设置允许编辑文本的小部件（如 GtkEntry）在五种状态之一的背景颜色。 | base[ACTIVE] = { 0.5, 0.3, 1.0 } |
| bg[state] | 设置大多数小部件在五种状态之一的背景颜色。 | bg[NORMAL] = “#036” |
| bg_pixmap[state] | 设置小部件在五种状态之一使用的背景图像。如果图像文件是相对路径，将在 pixmap_path 指定的路径中搜索。 | bg_pixmap[SELECTED] = “image.xpm” |
| class::property | 为特定小部件类设置样式属性。 | class::cursor-aspect-ratio = 0.1 |
| color[“color_name”] | 从 GTK+ 2.10 开始，可以定义自己的颜色，颜色用 @color_name 引用。 | |
| engine | 主题引擎允许从 RC 文件定义自己的小部件样式。 | |
| fg | 设置大多数小部件在五种状态之一的前景颜色。 | fg[PRELIGHT] = “#123456” |
| font_name | 从 GTK+ 2.10 开始，忽略字体和字体集样式，使用此样式指定字体名称，应按照 Pango 字体描述字符串的格式指定。 | font_name = “Sans Bold 12” |
| stock[“stockid”] | 定义应用程序可以使用的新库存项，接受图像文件名、文本方向、小部件状态和大小。 | stock[“myitem”] = { “myitem.png”, LTR, NORMAL, “gtk-menu” } |
| text[state] | 设置如 GtkEntry 等小部件的文本颜色。 | text[PRELIGHT] = { 0, 65535, 0 } |
| xthickness | 设置 GTK+ 中各种值的水平内边距，以整数指定。 | |
| ythickness | 设置 GTK+ 中各种值的垂直内边距，以整数指定。 | |

2.1 自定义颜色

从 GTK+ 2.10 开始，可以定义自己的颜色，并使用以下四个函数来改变现有颜色：
- shade (factor, color) ：使指定颜色变亮或变暗。factor 是一个浮点数，1.0 表示颜色不变，小于 1.0 使颜色变暗，大于 1.0 使颜色变亮。
- darker (color) ：相当于 shade (0.7, color)。
- lighter (color) ：相当于 shade (1.3, color)。
- mix (factor, color1, color2) ：通过混合两种颜色创建新颜色，factor 为 0.0 输出 color2，为 1.0 输出 color1。

以下是一些颜色创建表达式的示例：

color["blackwhite"] = mix (0.5, "#000000", "#FFFFFF")
color["darker"] = shade (0.5, @blackwhite)
color["multiple"] = shade (1.4, mix (0.1, "#369", { 0, 1.0, 0 }))

3. Pango 文本标记语言

Pango 文本标记语言允许在一些小部件（如 GtkLabel）中使用 XML 标签来改变文本样式。

3.1 标签属性

属性	描述
background	描述背景颜色的值，可以是十六进制 RGB 值（如 #RRGGBB）或支持的颜色名称（如 blue）。
face	字体族名称，如 Sans 或 Monospace，与 font_family 相同。
fallback	默认启用，系统会尝试找到最接近指定字体的字体。必要时可设为 false。
font_desc	PangoFontDescription 支持的字体描述字符串，如 “Sans Bold 12”。
font_family	字体族名称，如 Sans 或 Monospace，与 face 相同。
foreground	描述前景颜色的值，可以是十六进制 RGB 值（如 #RRGGBB）或支持的颜色名称（如 blue）。
lang	指定文本字符串的语言代码。
rise	通过指定垂直位移（以 em 单位的万分之一为单位）来创建上标和下标。负值创建下标，正值创建上标。
size	字体大小，以点的 1/1024 为单位，也可以使用 xx-small、x-small 等。
stretch	文本的拉伸程度，可能的值包括 ultracondensed、extracondensed 等。
strikethrough	指定是否在文本上划一条线，true 表示划，false 表示不划。
strikethrough_color	描述删除线颜色的值，可以是十六进制 RGB 值（如 #RRGGBB）或支持的颜色名称（如 blue）。
style	文本的斜体样式，可能的值包括 normal、oblique 和 italic。
underline	描述文本下划线的方式，可能的值包括 single、double、low 和 none。
underline_color	描述下划线颜色的值，可以是十六进制 RGB 值（如 #RRGGBB）或支持的颜色名称（如 blue）。
variant	值为 normal 或 smallcaps，允许文本以全大写字母呈现。
weight	文本的粗细，可能的值包括 ultralight、light 等。

3.2 便捷标签

Pango 文本标记语言还提供了一些便捷标签，可替代各种 属性：
- ：使字体加粗，相当于 。
- ：使字体比当前字体大，相当于 。
- ：使字体倾斜，相当于 。
- ：在文本上划一条线，相当于 。
- ：使文本成为下标，使用下标文本的默认值。
- ：使文本成为上标，使用上标文本的默认值。
- ：使字体比当前字体小，相当于 。
- ：使字体成为等宽字体，可用于代码段或需要等宽字符的其他字符串。
- ：给文本加下划线，相当于 。

4. GtkTextTag 样式

文本标签允许为 GtkTextBuffer 的特定部分定义样式。表 2 列出了 GtkTextTag 支持的样式属性：
| 属性 | 类型 | 描述 |
| ---- | ---- | ---- |
| background | gchararray | 背景颜色，以十六进制字符串指定，格式为 #RRGGBB。 |
| background-full-height | gboolean | 指示背景颜色是否填充整行高度或仅填充每个字符的高度。 |
| background-gdk | GdkColor | 背景颜色。 |
| background-stipple | GdkPixmap | 作为小部件背景绘制的位图。 |
| direction | GtkTextDirection | 默认文本方向，设置为 GTK_TEXT_DIR_NONE、GTK_TEXT_DIR_LTR 或 GTK_TEXT_DIR_RTL。 |
| editable | gboolean | 指示文本是否可修改。 |
| family | gchararray | 字体族的正式名称，如 Sans 或 Monospace。 |
| font | gchararray | 以 PangoFontDescription 接受的形式描述完整字体的字符串。 |
| font-desc | PangoFontDescription | 应用于小部件的字体，也可以使用 font 指定实际字体字符串。 |
| foreground | gchararray | 前景颜色，以十六进制字符串指定，格式为 #RRGGBB。 |
| foreground-gdk | GdkColor | 前景颜色。 |
| foreground-stipple | GdkPixmap | 用作前景掩码的位图。 |
| indent | gint | 设置段落缩进的像素数。 |
| invisible | gboolean | 指示文本是否隐藏。 |
| justification | GtkJustification | 对齐方式，设置为 GTK_JUSTIFY_LEFT、GTK_JUSTIFY_RIGHT 或 GTK_JUSTIFY_CENTER。 |
| language | gchararray | 默认语言的 ISO 代码，使用 NULL 移除先前的设置。 |
| left-margin | gint | 左边距的宽度，以像素为单位。 |
| name | gchararray | 可作为文本标签名称的字符串，使用 NULL 移除先前的设置。 |
| paragraph-background | gchararray | 段落背景颜色，以十六进制字符串指定，格式为 #RRGGBB。 |
| paragraph-background-gdk | GdkColor | 段落的背景颜色。 |
| pixels-above-lines | gint | 在段落上方添加的像素空间数。 |
| pixels-below-lines | gint | 在段落下方添加的像素空间数。 |
| pixels-inside-wrap | gint | 在换行线之间添加的像素空间数。 |
| right-margin | gint | 右边距的宽度，以像素为单位。 |
| rise | gint | 文本相对于行底部的偏移量。 |
| scale | gdouble | 字体大小，以 Pango 缩放值设置，如 PANGO_SCALE_XX_SMALL、PANGO_SCALE_X_SMALL 等。 |
| size | gint | 字体大小，以 Pango 单位表示。 |
| size-points | gdouble | 字体大小，以点为单位。 |
| stretch | PangoStretch | 文本的拉伸程度，设置为 PANGO_STRETCH_ULTRA_CONDENSED 等。 |
| strikethrough | gboolean | 指示是否在文本上划一条线。 |
| style | PangoStyle | 字体样式值，设置为 PANGO_STYLE_NORMAL、PANGO_STYLE_OBLIQUE 或 PANGO_STYLE_ITALIC。 |
| tabs | PangoTabArray | 用于标签范围内所有制表符的自定义制表符数组。 |
| underline | PangoUnderline | 下划线样式，设置为 PANGO_UNDERLINE_NONE、PANGO_UNDERLINE_SINGLE 等。 |
| variant | PangoVariant | 文本应全部以大写字母呈现（PANGO_VARIANT_SMALL_CAPS）或以正常方式呈现（PANGO_VARIANT_NORMAL）。 |

5. 小部件样式属性

许多小部件都有可以通过 RC 文件更改的样式属性，以下是部分小部件的样式属性：

5.1 GtkArrow 样式属性

属性	类型	描述
weight	gint	字体粗细，设置为 PANGO_WEIGHT_ULTRALIGHT、PANGO_WEIGHT_LIGHT 等。
wrap-mode	GtkWrapMode	换行模式，设置为 GTK_WRAP_NONE、GTK_WRAP_CHAR 等。

5.2 GtkAssistant 样式属性

属性	类型	描述
arrow-scaling	gfloat	用于缩放箭头大小的数字，范围在 0.0 到 1.0 之间，默认值为 0.7。
content-padding	gint	在每页内容周围添加的像素内边距。
header-padding	gint	在每页标题周围添加的像素内边距。

5.3 GtkButton 样式属性

属性	类型	描述
child-displacement-x	gint	按钮按下时，按钮子小部件的水平位移。
child-displacement-y	gint	按钮按下时，按钮子小部件的垂直位移。
default-border	GtkBorder	当按钮能够成为默认小部件时，在按钮周围添加的额外边框。
default-outside-border	GtkBorder	当按钮能够成为默认小部件时，在按钮外部添加的额外边框。
displace-focus	gboolean	如果设置为 TRUE，将使用子位移样式属性。
image-spacing	gint	按钮中图像和文本之间添加的像素间距。
inner-border	GtkBorder	按钮及其子小部件边缘的边框。

5.4 GtkButtonBox 样式属性

属性	类型	描述
child-internal-pad-x	gint	每个子小部件两侧的内边距。
child-internal-pad-y	gint	每个子小部件上下的内边距。
child-min-height	gint	容器内每个按钮的最小高度。
child-min-width	gint	容器内每个按钮的最小宽度。

5.5 GtkCheckButton 样式属性

属性	类型	描述
indicator-size	gint	复选框或单选按钮的大小，以像素为单位。
indicator-spacing	gint	复选框指示器周围添加的内边距。

5.6 样式定制流程

以下是一个简单的样式定制流程 mermaid 流程图：

graph LR
    A[开始] --> B[选择小部件]
    B --> C[确定小部件状态]
    C --> D[选择样式属性]
    D --> E[指定属性值]
    E --> F[保存 RC 文件]
    F --> G[应用样式]
    G --> H[结束]

通过以上介绍，我们可以看到 GTK+ 提供了丰富的样式定制选项，通过合理使用这些选项，可以为应用程序创建出独特的用户界面。后续还会有更多小部件样式属性的介绍以及实际应用案例。

6. 更多小部件样式属性

6.1 GtkCheckMenuItem 样式属性

属性	类型	描述
indicator-size	gint	复选菜单项指示器的大小，以像素为单位。

6.2 GtkComboBox 样式属性

属性	类型	描述
appears-as-list	gboolean	如果设置为 TRUE，激活小部件时显示的下拉窗口将显示为列表而不是菜单。
arrow-size	gint	组合框显示的箭头大小，以像素为单位，这是最小值，如果字体大小设置得更大，箭头会相应增大。

6.3 GtkDialog 样式属性

属性	类型	描述
action-area-border	gint	在对话框底部操作区域周围添加的像素内边距。
button-spacing	gint	对话框操作区域中按钮之间添加的间距。
content-area-border	gint	在对话框主要内容周围添加的像素内边距。

6.4 GtkEntry 样式属性

属性	类型	描述
inner-border	GtkBorder	在 GtkEntry 小部件的文本和其边缘之间添加的像素内边距。

6.5 GtkExpander 样式属性

属性	类型	描述
expander-size	gint	扩展器箭头的大小，以像素为单位。
expander-spacing	gint	扩展器箭头周围添加的像素内边距。

6.6 GtkIconView 样式属性

属性	类型	描述
selection-box-alpha	guchar	选择框的 alpha 值，默认值为 64。
selection-box-color	GdkColor	选择框显示的颜色。

6.7 GtkMenu 样式属性

属性	类型	描述
double-arrow	gboolean	如果设置为 TRUE，滚动菜单时将显示两个箭头。
horizontal-offset	gint	子菜单相对于其原始位置的水平偏移量，以像素为单位，该值可以为正或负，默认值为 -2。
horizontal-padding	gint	在菜单左右两侧添加的像素内边距。
vertical-offset	gint	子菜单相对于其原始位置的垂直偏移量，以像素为单位，该值可以为正或负。
vertical-padding	gint	在菜单上下边缘添加的像素内边距。

6.8 GtkMenuBar 样式属性

属性	类型	描述
internal-padding	gint	菜单项和菜单栏边缘之间的内边距。
shadow-type	GtkShadowType	菜单栏边缘周围放置的阴影类型。

6.9 GtkMenuItem 样式属性

属性	类型	描述
arrow-spacing	gint	当菜单项包含子菜单时，菜单项标签和其箭头之间添加的内边距。
horizontal-padding	gint	菜单项两侧添加的像素内边距。
selected-shadow-type	GtkShadowType	菜单项被选中时，其边缘周围放置的阴影类型。
toggle-spacing	gint	菜单项图标和文本之间添加的像素内边距。

6.10 GtkMessageDialog 样式属性

属性	类型	描述
message-border	gint	消息对话框中图像和标签周围添加的内边距。
use-separator	gboolean	如果设置为 TRUE，将在消息对话框的内容和其按钮之间绘制分隔线。

6.11 GtkNotebook 样式属性

属性	类型	描述
arrow-spacing	gint	滚动箭头和 GtkNotebook 小部件标签之间的内边距。
has-backward-stepper	gboolean	如果设置为 TRUE，将显示向后滚动箭头。
has-forward-stepper	gboolean	如果设置为 TRUE，将显示向前滚动箭头。
has-secondary-backward-stepper	gboolean	如果设置为 TRUE，将在标签的另一侧放置第二个向后滚动箭头。
has-secondary-forward-stepper	gboolean	如果设置为 TRUE，将在标签的另一侧放置第二个向前滚动箭头。
tab-curvature	gint	选中标签和未选中标签之间的大小差异。
tab-overlap	gint	相邻标签重叠的像素数。

6.12 GtkPaned 样式属性

属性	类型	描述
handle-size	gint	两个窗格之间分隔器的宽度或高度。

6.13 GtkProgressBar 样式属性

属性	类型	描述
xspacing	gint	小部件宽度方向添加的水平间距。
yspacing	gint	小部件高度方向添加的垂直间距。

6.14 GtkRange 样式属性

属性	类型	描述
activate-slider	gboolean	如果设置为 TRUE，滑块被拖动时将绘制为活动状态，阴影将向内绘制。
arrow-displacement-x	gint	当水平箭头被按下时，范围将沿箭头指向的方向移动的距离。
arrow-displacement-y	gint	当垂直箭头被按下时，范围将沿箭头指向的方向移动的距离。
slider-width	gint	实际滚动条或刻度区域的宽度或高度，取决于小部件的方向。
stepper-size	gint	步进按钮的大小，取决于范围小部件的类型。
stepper-spacing	gint	步进按钮和滑块之间添加的内边距，如果设置为正数，将导致 trough-under-steppers 被设置。
trough-border	gint	步进器和外部槽之间添加的内边距。
trough-side-details	gboolean	如果设置为 TRUE，将在步进器的侧面放置细节。
trough-upper-steppers	gboolean	如果设置为 TRUE，槽将沿整个范围绘制。

6.15 GtkScale 样式属性

属性	类型	描述
slider-length	gint	GtkScale 滑块的长度，以像素为单位。
value-spacing	gint	如果显示刻度值，刻度值和槽之间的内边距。

6.16 GtkScrollbar 样式属性

属性	类型	描述
fixed-slider-length	gboolean	如果设置为 TRUE，滑块将被强制保持最小长度，无论范围大小如何。
has-backward-stepper	gboolean	如果设置为 TRUE，将显示向后箭头。
has-forward-stepper	gboolean	如果设置为 TRUE，将显示向前箭头。
has-secondary-backward-stepper	gboolean	如果设置为 TRUE，将在滚动条的另一侧放置第二个向后箭头。
has-secondary-forward-stepper	gboolean	如果设置为 TRUE，将在滚动条的另一侧放置第二个向前箭头。
min-slider-length	gint	滑块的最小长度，如果 fixed-slider-length 设置为 TRUE，这将是滚动器的恒定大小。

6.17 GtkScrolledWindow 样式属性

属性	类型	描述
scrollbar-spacing	gint	滚动条和滚动窗口内容之间的像素内边距。

6.18 GtkSpinButton 样式属性

属性	类型	描述
shadow-type	GtkShadowType	围绕微调按钮绘制的阴影类型，默认阴影类型为 GTK_SHADOW_IN。

6.19 GtkStatusbar 样式属性

属性	类型	描述
shadow-type	GtkShadowType	围绕状态栏内容绘制的阴影类型，默认阴影类型为 GTK_SHADOW_IN。

6.20 GtkTextView 样式属性

属性	类型	描述
error-underline-color	GdkColor	用于在标记为错误的文本下方绘制下划线的颜色。

6.21 GtkToolbar 样式属性

属性	类型	描述
button-relief	GtkReliefStyle	工具栏按钮周围放置的边框类型。
internal-padding	gint	工具栏边框和工具按钮之间的像素内边距。
max-child-expand	gint	每个工具项可以调整到的最大宽度或高度。
shadow-type	GtkShadowType	围绕工具栏绘制的阴影类型，默认阴影类型为 GTK_SHADOW_OUT。
space-size	gint	工具栏上间隔器的宽度或高度。
space-style	GtkToolbarSpaceStyle	工具栏将显示的间隔器类型，可以设置为 GTK_TOOLBAR_SPACE_EMPTY 或 GTK_TOOLBAR_SPACE_LINE，分别显示空内边距或一条线。

6.22 GtkToolButton 样式属性

属性	类型	描述
icon-spacing	gint	工具按钮图标和标签之间的像素内边距。

6.23 GtkTreeView 样式属性

属性	类型	描述
allow-rules	gboolean	如果设置为 TRUE，行可以以交替颜色绘制，但这并不启用此功能，只是允许这样做。
even-row-color	GdkColor	当交替行以不同颜色绘制时，偶数行的背景颜色。
expander-size	gint	行扩展器的大小，以像素为单位，默认值为 12。
grid-line-pattern	gchararray	树视图中绘制网格线使用的模式。
grid-line-width	gint	树视图中绘制网格线的宽度。
horizontal-separator	gint	单元格之间的水平间距，必须是正偶数。
indent-expanders	gboolean	如果设置为 TRUE，当行内容展开时，扩展器将缩进。
odd-row-color	GdkColor	当交替行以不同颜色绘制时，奇数行的背景颜色。
row-ending-details	gboolean	如果设置为 TRUE，将启用行背景主题。
tree-line-pattern	gchararray	用于绘制树视图线的模式字符串。
tree-line-width	gint	树视图线的宽度，以像素为单位。
vertical-separator	gint	单元格之间的垂直间距，必须是正偶数。

6.24 GtkWidget 样式属性

属性	类型	描述
cursor-aspect-ratio	gfloat	绘制插入光标时的纵横比，范围在 0.0 到 1.0 之间，默认值为 0.04。
cursor-color	GdkColor	用于绘制插入光标的颜色。
draw-border	GtkBorder	在小部件初始分配范围之外放置的边框量。
focus-line-pattern	gchararray	小部件获得焦点时围绕其绘制的模式字符串。
focus-line-width	gint	小部件获得焦点时绘制的线的宽度。
focus-padding	gint	焦点线和小部件边缘之间的像素内边距。
interior-focus	gboolean	如果设置为 TRUE，将为小部件绘制焦点线。
link-color	GdkColor	用于绘制未访问链接的颜色。
scroll-arrow-hlength	gint	具有水平滚动箭头的小部件中，水平滚动箭头的长度。
scroll-arrow-vlength	gint	具有垂直滚动箭头的小部件中，垂直滚动箭头的长度。
secondary-cursor-color	GdkColor	用于绘制辅助插入光标的颜色，当同时编辑从左到右和从右到左的文本时显示此光标。
separator-height	gint	不同小部件中显示的许多类型分隔器的高度，此属性仅在 wide-separators 设置为 TRUE 时有效。
separator-width	gint	不同小部件中显示的许多类型分隔器的宽度，此属性仅在 wide-separators 设置为 TRUE 时有效。
visited-link-color	GdkColor	用于绘制已访问链接的颜色。
wide-separators	gboolean	如果设置为 TRUE，可以使用 separator-width 和 separator-height 设置分隔器的宽度和高度，此时分隔器将绘制为框而不是线。

7. 总结

GTK+ 提供了丰富多样的样式定制选项，涵盖了从基本的颜色、字体设置到各种小部件的详细样式属性调整。通过合理运用这些定制方法，如使用 RC 文件、Pango 文本标记语言和 GtkTextTag 样式等，可以为应用程序打造出独具特色的用户界面。

在实际应用中，我们可以按照以下步骤进行样式定制：
1. 选择要定制样式的小部件。
2. 确定小部件的状态（如 NORMAL、ACTIVE 等）。
3. 选择合适的样式属性。
4. 为属性指定具体的值。
5. 保存 RC 文件。
6. 应用样式到应用程序中。

以下是一个简单的总结流程图：

graph LR
    A[选择小部件] --> B[确定状态]
    B --> C[选择属性]
    C --> D[指定值]
    D --> E[保存文件]
    E --> F[应用样式]

在定制过程中，要注意颜色的指定格式、字体的设置规范以及不同小部件样式属性的特点。同时，通过自定义颜色和使用便捷标签等功能，可以更高效地实现所需的样式效果。希望这些内容能帮助你在 GTK+ 应用开发中实现出色的界面设计。