☰

GTK2 应用程序中的传统滚动条

tag-icon • tag-icon gui gtk gtk3 gtk2
GTK2 应用程序中的传统滚动条

~/.config/gtk-3.0/gtk.css为了在 GTK3 应用程序中启用带有滚动按钮​​的传统滚动条，我添加了包含内容的文件

scrollbar {
        -GtkScrollbar-has-backward-stepper: true;
        -GtkScrollbar-has-forward-stepper: true;
}

scrollbar slider {
        border: 0;
        border-radius: 0;
        min-width: 15px;
        min-height: 15px;
}

下面的第一个屏幕截图显示了 GTK3 应用程序 Pluma 中的结果。如何在 GTK2 应用程序（如下面第二个屏幕截图中的 PCManFM）中获得相同类型的滚动条？

编辑2020-08-13: 我已经尝试过这个建议如何获得更大的静态滚动条...但这对文件浏览器 PCManFM 来说没有什么区别，它仍然具有狭窄的滚动条，如下面的第二个屏幕截图所示。

编辑2020-08-18：按照下面 Miloš Pavlović 的建议，更改了 GTK2 应用程序中的滚动条，但滚动条没有步进器，并且滑块看起来非常奇怪，请参见下面的第三个屏幕截图。

带有传统滚动条的文本编辑器

具有新型窄滚动条的文件浏览器

带有奇怪滚动条的文件浏览器

编辑2023-07-19：安装 Debian 12 后，我对这个问题进行了更深入的研究。可以通过注释掉以下行来实现正确的步进箭头/usr/share/themes/Adwaita/gtk-2.0/main.rc：

image {
  function = ARROW
  detail   = "vscrollbar"
}
image {
  function = ARROW
  detail   = "hscrollbar"
}

这是一个屏幕截图，其中包含以下设置~/.gtkrc-2.0：

gtk-theme-name = "Adwaita"
gtk-icon-theme-name = "Adwaita"

style "TraditionalScrollbar" {
     GtkScrollbar::has-backward-stepper = 1
     GtkScrollbar::has-forward-stepper = 1
     GtkScrollbar::slider-width = 16
     GtkScrollbar::stepper-size = 16
}

class "GtkScrollbar" style "TraditionalScrollbar"

文件浏览器带有奇怪的滚动条，但步进箭头正确

剩下的问题是如何

  1. 使滚动条为实心（而不是空心）
  2. 使滚动条填满槽并
  3. 使滚动条具有锋利的边缘（不是圆形的）。

答案1

有隐藏文件.gtkrc-2.0在覆盖当前主题的主文件夹中。如果没有创建它。将下一个粘贴到文件末尾

style "myscrollbar"
{
     GtkRange::stepper-size = 16
     GtkRange::trough-under-steppers = 1
     GtkScrollbar::has-backward-stepper = 1  
     GtkScrollbar::has-forward-stepper = 1
     GtkScrollbar::slider-width = 16
     GtkScrollbar::trough-border = 2
}
class "GtkScrollbar" style "myscrollbar"

保存并注销/登录以应用更改。

  • GtkRange::stepper-size = 0 --> 16 是箭头按钮的垂直尺寸，零值会使它们消失（至少在某些应用程序中？））

  • GtkRange::trough-under-steppers = 0 --> 1（将左滚动条边框延伸到箭头上以获得更整洁的外观）

  • GtkScrollbar::has-*-stepper = 0 --> 1 打开滚动箭头（如果步进器大小不为 0）

  • GtkScrollbar::slider-width = 14 --> 16 显然改变了滚动条和滑块的宽度，尽管缺少右边框使滑块看起来偏离中心且宽度不齐平

  • GtkScrollbar::trough-border = 0 --> 2 是获取（左）边框的部分要求

答案2

事实证明，缺少的设置是GtkScrollbar::stepper-size = 16.因此，一个简单的~/.gtkrc-2.0文件如下所示：

style "myscrollbar"
{
  GtkScrollbar::stepper-size = 16
  GtkScrollbar::has-backward-stepper = 1
  GtkScrollbar::has-forward-stepper  = 1
}

class "GtkScrollbar" style "myscrollbar"

会成功的。

有关在滚动条两端显示步进器三角形的方法，请参见这个答案。

答案3

GTK 2 应用程序的传统滚动条：

从 Adwaita 主题复制滚动条箭头图标，并为带有尖角（非圆角）的滚动条滑块创建图标：

$ mkdir -p ~/.local/share/themes/Adwaita/gtk-2.0/assets
$ cp /usr/share/themes/Adwaita/gtk-2.0/assets/pan-*.png ~/.local/share/themes/Adwaita/gtk-2.0/assets/
$ convert -size 16x16 "canvas:#787c7d" ~/.local/share/themes/Adwaita/gtk-2.0/assets/scrollbar-slider.png
$ convert -size 16x16 "canvas:#535859" ~/.local/share/themes/Adwaita/gtk-2.0/assets/scrollbar-slider-hover.png
$ convert -size 16x16 "canvas:#2a76c6" ~/.local/share/themes/Adwaita/gtk-2.0/assets/scrollbar-slider-active.png

~/.gtkrc-2.0创建包含以下内容的文件：

gtk-theme-name = "Adwaita"
gtk-icon-theme-name = "Adwaita"

style "TraditionalScrollbar" {
    GtkScrollbar::has-backward-stepper = 1
    GtkScrollbar::has-forward-stepper = 1
    GtkScrollbar::slider-width = 16
    GtkScrollbar::stepper-size = 16

    engine "pixmap" {
        /*vertical scrollbar steppers*/
        image {
            function = ARROW
            state = NORMAL
            detail = "vscrollbar"
            overlay_file = ".local/share/themes/Adwaita/gtk-2.0/assets/pan-up.png"
            overlay_stretch = FALSE
            arrow_direction = UP
        }
        image {
            function = ARROW
            state = INSENSITIVE
            detail = "vscrollbar"
            overlay_file = ".local/share/themes/Adwaita/gtk-2.0/assets/pan-up-insensitive.png"
            overlay_stretch = FALSE
            arrow_direction = UP
        }
        image {
            function = ARROW
            state = NORMAL
            detail = "vscrollbar"
            overlay_file = ".local/share/themes/Adwaita/gtk-2.0/assets/pan-down.png"
            overlay_stretch = FALSE
            arrow_direction = DOWN
        }
        image {
            function = ARROW
            state = INSENSITIVE
            detail = "vscrollbar"
            overlay_file = ".local/share/themes/Adwaita/gtk-2.0/assets/pan-down-insensitive.png"
            overlay_stretch = FALSE
            arrow_direction = DOWN
        }

        /*horizontal scrollbar steppers*/
        image {
            function = ARROW
            state = NORMAL
            detail = "hscrollbar"
            overlay_file = ".local/share/themes/Adwaita/gtk-2.0/assets/pan-left.png"
            overlay_stretch = FALSE
            arrow_direction = LEFT
        }
        image {
            function = ARROW
            state = INSENSITIVE
            detail = "hscrollbar"
            overlay_file = ".local/share/themes/Adwaita/gtk-2.0/assets/pan-left-insensitive.png"
            overlay_stretch = FALSE
            arrow_direction = LEFT
        }
        image {
            function = ARROW
            state = NORMAL
            detail = "hscrollbar"
            overlay_file = ".local/share/themes/Adwaita/gtk-2.0/assets/pan-right.png"
            overlay_stretch = FALSE
            arrow_direction = RIGHT
        }
        image {
            function = ARROW
            state = INSENSITIVE
            detail = "hscrollbar"
            overlay_file = ".local/share/themes/Adwaita/gtk-2.0/assets/pan-right-insensitive.png"
            overlay_stretch = FALSE
            arrow_direction = RIGHT
        }

        /*scrollbar sliders*/
        image {
            function = SLIDER
            state = NORMAL
            detail = "slider"
            file = ".local/share/themes/Adwaita/gtk-2.0/assets/scrollbar-slider.png"
        }
        image {
            function = SLIDER
            state = PRELIGHT
            detail = "slider"
            file = ".local/share/themes/Adwaita/gtk-2.0/assets/scrollbar-slider-hover.png"
        }
        image {
            function = SLIDER
            state = ACTIVE
            detail = "slider"
            file = ".local/share/themes/Adwaita/gtk-2.0/assets/scrollbar-slider-active.png"
        }
    }
}

class "GtkScrollbar" style "TraditionalScrollbar"

结果如下：

使用传统滚动条的文件浏览器 PCManFM

相关内容