Skip to content

优化 ScrollBar 样式#5784

Merged
Glavo merged 6 commits intoHMCL-dev:mainfrom
CiiLu:scroll
Apr 18, 2026
Merged

优化 ScrollBar 样式#5784
Glavo merged 6 commits intoHMCL-dev:mainfrom
CiiLu:scroll

Conversation

@CiiLu
Copy link
Copy Markdown
Contributor

@CiiLu CiiLu commented Mar 13, 2026

感觉有点过于圆+粗了

@Calboot
Copy link
Copy Markdown
Contributor

Calboot commented Mar 14, 2026

恭喜你,你成功的 reverse 了 #5716

之前调粗是为了防止被吞圆角,比如

image

这里你调细就会出问题

不幸的是,我没有在 m3 中找到任何滚动条的描述


当然,也有一种解决办法是让它不要顶到头上

另外如果你执意要这么改的话建议改成 4,因为原来就是 4(

@CiiLu CiiLu marked this pull request as draft March 15, 2026 01:37
@CiiLu CiiLu marked this pull request as ready for review April 5, 2026 12:50
@Glavo
Copy link
Copy Markdown
Member

Glavo commented Apr 5, 2026

/gemini review

@Glavo
Copy link
Copy Markdown
Member

Glavo commented Apr 5, 2026

我感觉改之后又有点太细了(可能是习惯了新的样式),我感觉还是粗一点容易操控。

Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request adjusts the scroll bar's appearance by reducing its thickness from 8 to 4.5 and introducing a layout offset. The changes affect both the Java skin implementation and the CSS styling. Feedback suggests improving code maintainability by replacing hardcoded values with constants or variables and refactoring redundant binding logic for the track and thumb components to reduce duplication.

Comment on lines 150 to 170
if (scrollBar.getOrientation() == Orientation.HORIZONTAL) {
thumb.relocate(0, -8);
thumb.widthProperty().bind(Bindings.max(20, scrollBar.visibleAmountProperty().divide(range).multiply(scrollBar.widthProperty())));
thumb.setHeight(8);
thumb.xProperty().bind(Bindings.subtract(scrollBar.widthProperty(), thumb.widthProperty()).multiply(position));
thumb.relocate(0, -4.5);
thumb.setHeight(4.5);

NumberBinding trackWidth = Bindings.subtract(scrollBar.widthProperty(), offset * 2);
thumb.widthProperty().bind(Bindings.max(20, scrollBar.visibleAmountProperty().divide(range).multiply(trackWidth)));
thumb.xProperty().bind(
Bindings.add(offset,
Bindings.subtract(trackWidth, thumb.widthProperty()).multiply(position))
);
} else {
thumb.relocate(-8, 0);
thumb.setWidth(8);
thumb.heightProperty().bind(Bindings.max(20, scrollBar.visibleAmountProperty().divide(range).multiply(scrollBar.heightProperty())));
thumb.yProperty().bind(Bindings.subtract(scrollBar.heightProperty(), thumb.heightProperty()).multiply(position));
thumb.relocate(-4.5, 0);
thumb.setWidth(4.5);

NumberBinding trackHeight = Bindings.subtract(scrollBar.heightProperty(), offset * 2);
thumb.heightProperty().bind(Bindings.max(20, scrollBar.visibleAmountProperty().divide(range).multiply(trackHeight)));
thumb.yProperty().bind(
Bindings.add(offset,
Bindings.subtract(trackHeight, thumb.heightProperty()).multiply(position))
);
}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

使用前面定义的 thicknessisHorizontaltrackLength 变量来简化滑块(thumb)的配置,避免重复的逻辑判断和绑定计算。

                if (isHorizontal) {
                    thumb.relocate(0, -thickness);
                    thumb.setHeight(thickness);

                    thumb.widthProperty().bind(Bindings.max(20, scrollBar.visibleAmountProperty().divide(range).multiply(trackLength)));
                    thumb.xProperty().bind(
                            Bindings.add(offset,
                                    Bindings.subtract(trackLength, thumb.widthProperty()).multiply(position))
                    );
                } else {
                    thumb.relocate(-thickness, 0);
                    thumb.setWidth(thickness);

                    thumb.heightProperty().bind(Bindings.max(20, scrollBar.visibleAmountProperty().divide(range).multiply(trackLength)));
                    thumb.yProperty().bind(
                            Bindings.add(offset,
                                    Bindings.subtract(trackLength, thumb.heightProperty()).multiply(position))
                    );
                }

Comment thread HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/FloatScrollBarSkin.java Outdated
@Glavo
Copy link
Copy Markdown
Member

Glavo commented Apr 17, 2026

@codex review

@chatgpt-codex-connector
Copy link
Copy Markdown

Codex Review: Didn't find any major issues. Bravo.

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

该 PR 旨在优化应用内 ScrollBar 的视觉样式,使其看起来不再“过于圆 + 粗”。

Changes:

  • 调整全局 .scroll-bar .thumb 的圆角参数,减小滚动条滑块的圆润程度
  • 缩小 FloatScrollBarSkin 中 track/thumb 的厚度(8 → 5),并为两端增加内边距(offset)以改善观感

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File Description
HMCL/src/main/resources/assets/css/root.css 调整滚动条 thumb 的圆角大小以降低圆润感
HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/FloatScrollBarSkin.java 缩小浮动滚动条的尺寸并引入 offset,使布局更“细/轻”

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/FloatScrollBarSkin.java Outdated
Comment thread HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/FloatScrollBarSkin.java Outdated
Comment thread HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/FloatScrollBarSkin.java Outdated
@Glavo Glavo merged commit ade4872 into HMCL-dev:main Apr 18, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants