我有一个"slider progress bar hybrid",如the answer to this question中所描述的(带有值绑定的进度条顶部的不可见滑块)我的问题是滑块在左侧和右侧有一个小边距,因此进度条关闭了几个像素当滑块拇指放在滑块末端附近时 . 我尝试在滑块和轨道以及 Slider#setPadding()
上将 -fx-background-insets
, -fx-background-radius
和 -fx-padding
设置为零,但都无济于事 .
如何摆脱滑块轨道两侧的间隙?
到目前为止,这是我的代码:
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;
}
最后是一个显示间隙的小图像(白色条是滑块轨道,红色轮廓属于滑块,蓝色部分是绿色进度条轨道上的进度条,将滑块高度更改为进度条的一半,并使滑块轨迹可见用于演示):
1 回答
哇,在发布问题后几分钟就找到了问题的解决方案:
在滑块拇指上将
-fx-pref-width
设置为零会使这些间隙消失,这对我有用,因为我无论如何都要隐藏拇指 .我想,关于问题的谈话(或在这种情况下:写作)确实更容易解决问题 .