JavaFx：选项卡圆角 [英] JavaFx: tab rounded corners

问题描述

要使我的标签四角形变圆，我使用以下代码：

To make my tab corners rounded I use the following code:

.tab {
    -fx-border-radius: 10 10 0 0;
    -fx-background-radius: 10 10 0 0;
}

.tab:selected .focus-indicator {
    -fx-border-radius: 10 10 0 0, 10 10 0 0;
}

但是，我的行为很奇怪。创建新选项卡时，它会有一些额外的角落，当我更改焦点或创建新选项卡时，这些角落会消失。
例如 - 我创建了第一个标签。

However, I get rather strange behaviour. When new tab is created it has some extra corners which later disappear when I change focus or create new tab. For example - I create the first tab.

现在我创建了第二个选项卡。第一个标签已经正常，但第二个标签有这个奇怪的角落。

Now I create the second tab. The first tab is already normal, but the second has this strange corners.

I已经检查过centos和win7 - 行为是一样的。如何解决？

I've checked on centos and win7 - behaviour is the same. How to fix it?

编辑1


这是我的所有css文件。最终目标是使标题标题更大，带圆角。

EDIT 1
This is all my css file. The final target to make tab headers bigger with rounded corners.

.tab:selected .focus-indicator {
    -fx-border-radius: 10 10 0 0, 10 10 0 0;
     -fx-border-insets: -7 -7 -9 -8, -5 -5 -9 -6;
}

.tab-pane > .tab-header-area > .headers-region > .tab:selected{
    -fx-border-insets: 10 10 10 10, 10 10 10 10;
}

.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > 
.tab-label {
    -fx-alignment: CENTER;
    -fx-text-fill: -fx-text-base-color;
    -fx-padding:0 10 0 0;
}

.tab-header-area .tab{
    -fx-padding:4 10 5 10;
    -fx-border-radius: 10 10 0 0;
    -fx-background-radius: 10 10 0 0;
}

编辑2

我在两台不同的PC上检查过它：1（Ubuntu），2（Centoc 71和VM Win7）。我试着用oracle jdk编译 - 结果是一样的。

EDIT 2
I've checked it on two different PC: 1(Ubuntu),2(Centoc 71 and VM Win7). I tried to compile with oracle jdk - result is the same.

推荐答案

这是一个已报告的错误 https://javafx-jira.kenai.com/browse/RT-40462

This is an already reported bug https://javafx-jira.kenai.com/browse/RT-40462

更新错误已转移到openjdk错误跟踪系统：

https://bugs.openjdk.java.net/browse/JDK-8090243

https://bugs.openjdk.java.net/browse/JDK-8090243

您的部分代码是多余的。所以这应该有效。

Some of your code was redundant. So this should work.

.tab:selected .focus-indicator {
    -fx-border-radius: 10 10 0 0, 10 10 0 0;
    -fx-border-insets: -6 -9 -8 -8, -5 -8 -7 -7;
}
/*
.tab-pane > .tab-header-area > .headers-region > .tab:selected{
    -fx-border-insets: 0 1 1 0, 1 2 0 1, 2 3 0 2;
}
*/
.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-label {
    -fx-padding:0 10 0 0;
}

.tab-header-area .tab{
    -fx-padding:4 10 5 10;
    -fx-background-radius: 10 10 0 0;
}

这将是这样的：

更新

但是如果你真的只想在圆角上有更多的半径，那么这就是你要做的全部：

But if you really only want to have more radius to the rounded corners, this is all you have to do:

.tab-pane > .tab-header-area > .headers-region > .tab {
    /* if outer border should be 10 radius */
    -fx-background-radius: 10 10 0 0, 9 9 0 0, 8 8 0 0;
}

.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
    -fx-border-radius: 9 9 0 0, 8 8 0 0;
}

更新

这是我从你的代码中获得的。添加新创建的选项卡时会出现奇怪的行为。所以我制作了一个gif来展示鼠标悬停是如何工作的。

This is what I get from your code. There is a strange behaviour when adding a newly created tab. So I made a gif to show how the mouseover is working.

更新

这篇关于JavaFx：选项卡圆角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！