javafx圆形进度条(ProgressIndicator)去除数字、边框、勾

最新推荐文章于 2024-01-04 14:48:36 发布

魔女也要学编程

最新推荐文章于 2024-01-04 14:48:36 发布

阅读量505

点赞数

分类专栏： javafx解决方案文章标签： css

本文链接：https://blog.csdn.net/m0_60043298/article/details/128672301

版权

javafx解决方案专栏收录该内容

5 篇文章 0 订阅

订阅专栏

注意：更改样式的办法是通过css文件修改，并不提供java代码

1.官方文档

对应翻译，各个属性分别是

indicator  -  进度条外面的白色边框

progress  -  扇形

percentage  -  百分比文字

tick  -  到达100%后出现在圆形的勾

因此，想要修改对应的部分，必须分开处理

2.各个属性

注意：.bar是我的样式名称，后面的.indicator等属性是必须加上去的

indicator(白色边框)

实际上是一个背景色，想要修改则要设置背景颜色，即

.bar .indicator {
    -fx-background-color: "要修改的边框颜色/null";
}

progress(扇形)

也是一个背景色，由以下方式处理

.bar .progress{
    -fx-background-color: "想要修改的颜色/null";
}

percentage(百分比数字以及完成后的提示字样)

一个text文字，修改文字颜色即可

.bar .percentage{
    -fx-fill: null;
}

tick(100%后圆形出现的勾)

也是一个背景色，修改背景色即可

.bar .tick{
    -fx-background-color: null;
}

总的代码如下

.bar .indicator{
    -fx-background-color: null;
}
.bar .progress{
    -fx-background-color: #336633;
}
.bar .percentage{
    -fx-fill: null;
}
.bar .tick{
    -fx-background-color: null;
}

效果如下

3.缺点与不足

上面的文字和边框问题解决了，但是文字和边框只是看不见而已，但是实际还占着内存的，因此原来文字部分的地方还会留着空白。我在网上找了很多资料，找到以下的解决办法。思路是把进度条内部的间距缩小，代码如下

.bar {
    -fx-padding: 0 0 -16 0;
}

就达到以下效果

可以看到下面的空白消失了

因此总代码如下

.bar {
    -fx-padding: 0 0 -16 0;
}
.bar .indicator{
    -fx-background-color: null;
}
.bar .progress{
    -fx-background-color: #336633;
}
.bar .percentage{
    -fx-fill: null;
}
.bar .tick{
    -fx-background-color: null;
}