GTK+3.0下TreeView/ScrolledWindow滚动条CSS控制问题

我在GTK+3.22的服务器环境下做过类似的触摸屏适配，刚好能解决你的问题，咱们一步步来拆解：

一、核心问题梳理 #

你遇到的困惑主要来自两个点：

1. 混淆了Widget属性和CSS样式属性：has-backwards-stepper这类是GtkScrollbar的内置Widget属性，不能通过CSS设置，必须通过代码或UI编辑器开启；
2. GTK+版本属性差异：3.22是比较老的稳定版，很多高版本（3.24+）的CSS属性不支持，比如scrollbar-width就是3.24才引入的，而且你的CSS缺少单位（比如px），GTK+ CSS对单位有严格要求，无单位的值会被忽略。

二、适配GTK+3.22的正确CSS配置 #

以下是针对你需求的完整CSS代码，每部分都做了注释说明：

/* 垂直滚动条：强制始终显示，固定宽度 */
scrollbar.vertical {
  min-width: 80px; /* 必须加px单位，否则无效 */
  width: 80px;
  opacity: 1; /* 强制不透明，避免光标未悬停时隐藏 */
}

/* 水平滚动条（按需配置） */
scrollbar.horizontal {
  min-height: 80px;
  height: 80px;
  opacity: 1;
}

/* 滚动滑槽样式 */
scrollbar trough {
  background-color: #00ee00; /* 你的绿色滑槽背景 */
}

/* 滑块基础样式 */
scrollbar slider {
  background-color: #00FF00; /* 滑块默认颜色 */
  min-width: 80px; /* 和滚动条宽度保持一致 */
  min-height: 80px; /* 水平滑块高度 */
  border-radius: 0; /* 可选：去掉圆角，适配触摸屏点击 */
}

/* 滑块交互状态（增强触摸屏反馈） */
scrollbar slider:hover {
  background-color: #22ff22;
}

scrollbar slider:active {
  background-color: #44ff44;
}

/* 步进按钮样式（开启Widget属性后生效） */
scrollbar button {
  background-color: #00cc00;
  min-width: 80px;
  min-height: 80px;
}

scrollbar button:hover {
  background-color: #22dd22;
}

三、开启步进按钮（必须通过代码/UI设置） #

因为has-backwards-stepper这类是Widget属性，CSS无法控制，你需要通过以下方式开启：

代码示例（C语言） #

// 获取ScrolledWindow的垂直滚动条
GtkWidget *vscrollbar = gtk_scrolled_window_get_vadjustment(scrolled_window);
// 开启所有步进按钮
g_object_set(vscrollbar, 
             "has-backwards-stepper", TRUE,
             "has-forward-stepper", TRUE,
             "has-secondary-backward-stepper", TRUE,
             "has-secondary-forward-stepper", TRUE,
             NULL);

Glade编辑器设置 #

1. 选中你的GtkScrolledWindow；
2. 在右侧属性面板找到「Scrollbars」分类；
3. 勾选「Backwards Stepper」「Forward Stepper」等选项即可。

四、确保滚动条始终显示的额外配置 #

除了CSS设置，还需要把GtkScrolledWindow的滚动条策略设为Always：

• 代码中：gtk_scrolled_window_set_policy(scrolled_window, GTK_POLICY_AUTOMATIC, GTK_POLICY_ALWAYS);（第二个参数是垂直策略，第三个是水平策略，按需调整）
• Glade中：在GtkScrolledWindow属性里，把「Vertical Scrollbar Policy」和「Horizontal Scrollbar Policy」设为「Always」。

五、GTK+3.22 CSS调试与文档指引 #

1. GTK+ Inspector调试：启动应用时加上GTK_DEBUG=interactive参数，打开Inspector后切换到「CSS Nodes」和「Styles」标签，能实时查看可用的CSS节点和属性，这是最有效的调试方式；
2. 本地文档：Ubuntu 18.04可以安装libgtk-3-doc包，通过devhelp查看GTK+3.22的官方CSS样式文档，避免误用高版本属性。

内容的提问来源于stack exchange，提问作者Nathan Smith