首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Javafx:摆脱Slider边距

Javafx:摆脱Slider边距
EN

Stack Overflow用户
提问于 2015-09-04 04:55:13
回答 1查看 1.1K关注 0票数 1

我有一个the answer to this question中描述的“滑块进度条混合”(在带有值绑定的进度条顶部的不可见滑块),我的问题是滑块在左右两侧有一个很小的边距,所以当滑块拇指放在滑块的末端附近时,进度条偏离了几个像素。我试着在滑块、音轨和Slider#setPadding()上将-fx-background-insets-fx-background-radius-fx-padding设置为零,但都无济于事。

如何才能消除滑块轨道两侧的间隙?

到目前为止,我的代码如下:

代码语言:javascript
运行
复制
StackPane seekSliderStack = new StackPane();

ProgressBar seekProgressBar = new ProgressBar();
seekProgressBar.setMaxWidth(Double.MAX_VALUE);

Slider seekSlider = new Slider();
seekSlider.setMaxWidth(Double.MAX_VALUE);
seekSlider.valueProperty().addListener(new ChangeListener<Number>() {
    public void changed(ObservableValue<? extends Number> ov,
            Number oldValue, Number newValue) {
    seekProgressBar.setProgress(newValue.doubleValue() / 100);
    }
});
seekSlider.setValue(30);

//seekSlider.setPadding(Insets.EMPTY); // doesn't change anything

seekSliderStack.getChildren().addAll(seekProgressBar, seekSlider);

和css样式表:

代码语言:javascript
运行
复制
.slider {
    -fx-background-insets: 0; 
    -fx-background-radius: 0;
    -fx-padding: 0;
    -fx-border-insets: 0;
}

.slider .thumb {
    -fx-background-color: null;
}

.slider .track {
    -fx-background-color: null;
    -fx-pref-height: 20px;
    -fx-background-insets: 0; 
    -fx-background-radius: 0;
    -fx-padding: 0;
    -fx-border-insets: 0;
}

.progress-bar {
    -fx-background-color: null;
    -fx-background-insets: 0; 
    -fx-background-radius: 0;
}

.progress-bar .track{
    -fx-background-color: null;
    -fx-background-insets: 0;
    -fx-background-radius: 0;
}

.progress-bar .bar { 
    -fx-background-color: blue;
    -fx-background-insets: 0; 
    -fx-background-radius: 0;
}

最后是一张显示差距的小图片(白条是滑块轨迹,红色轮廓属于滑块,蓝色部分是绿色进度条轨迹上的进度条,将滑块高度更改为进度条高度的一半,并使滑块轨迹可见以进行演示):

EN

回答 1

Stack Overflow用户

发布于 2015-09-04 05:06:46

哇,在发布这个问题几分钟后就找到了问题的解决方案:

将滑块拇指上的-fx-pref-width设置为零可以使这些间隙消失,这对我来说很有效,因为我无论如何都会隐藏拇指。

我想,谈论(或者在这种情况下:写作)一个问题会让它更容易解决,这是真的。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/32385250

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档