Javafx:摆脱滑块边缘

时间:2015-09-03 20:55:13

标签: java css user-interface javafx slider

我有一个"滑块进度条混合"正如the answer to this question中描述的那样(带有值绑定的进度条顶部的不可见滑块)我的问题是滑块在左侧和右侧有一个小的边距,因此进度条关闭几个像素当滑块拇指放在滑块末端附近时。我尝试在滑块和轨道以及-fx-background-insets上将-fx-background-radius-fx-paddingSlider#setPadding()设置为零,但都无济于事。

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

到目前为止,这是我的代码:

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样式表:

.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;
}

最后显示间隙的小图像(白色条是滑块轨道,红色轮廓属于滑块,蓝色部分是绿色进度条轨道上的进度条,将滑块高度更改为进度条的一半&#39; s并使滑块轨迹可见以进行演示):

enter image description here

1 个答案:

答案 0 :(得分:1)

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

在滑块上将-fx-pref-width设置为零会使这些间隙消失,这对我有用,因为我无论如何都要隐藏拇指。

我认为关于问题的谈话(或在这种情况下:写作)会使解决问题变得更容易。