JavaFX 工具提示 - 边框颜色错误

Question

我对 JavaFX 中的工具提示有疑问。为了说明这个问题的核心，我通过 IntelliJ Idea 创建了新的 JavaFX 元素。该元素的根 Pane 是带有 alignment="CENTER" 的 HBox，并且 HBox 包含四个按钮(文本:Button A-D)。每个按钮都设置了带有文本的工具提示:示例工具提示 A-B。通过 fxml 文件，我还加载了保存在名为 styles.css 的文件中的级联样式。

问题描述: 我启动了应用程序，当我将鼠标悬停在第一个按钮上时，它的工具提示看起来与 CSS 文件描述的完全一样。当我将鼠标悬停在第二个按钮上时，工具提示的右边框会稍微亮一些。但是当我将鼠标悬停在第三个或第四个按钮上时，工具提示的右红色边框略微可见，我们可以看到它的背景(黄色)和边框颜色的混合。其他边界都没有这样做，只有正确的边界。 这是非常奇怪的行为。

我尝试了什么:我尝试更改字体系列、字体大小和填充。

我的问题:导致此问题的原因是什么？你有解决这个问题的方法吗？你也有这样的烦恼吗？

屏幕截图显示了我描述的问题

*鼠标光标悬停在按钮C上

主.java

package sample;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception{
        Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
        primaryStage.setTitle("Hello World");
        primaryStage.setScene(new Scene(root, 300, 275));
        primaryStage.show();
    }


    public static void main(String[] args) {
        launch(args);
    }
}

Controller.java

package sample;

public class Controller {
}

sample.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<HBox alignment="CENTER" spacing="10.0" stylesheets="@styles.css" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Button mnemonicParsing="false" text="Button A">
         <tooltip>
            <Tooltip text="Sample tooltip A" />
         </tooltip>
      </Button>
      <Button mnemonicParsing="false" text="Button B">
         <tooltip>
            <Tooltip text="Sample tooltip B" />
         </tooltip>
      </Button>
      <Button mnemonicParsing="false" text="Button C">
         <tooltip>
            <Tooltip text="Sample tooltip C" />
         </tooltip>
      </Button>
      <Button mnemonicParsing="false" text="Button D">
         <tooltip>
            <Tooltip text="Sample tooltip D" />
         </tooltip>
      </Button>
   </children>
</HBox>

样式.css

.tooltip{
-fx-text-fill:              black;
-fx-background-radius:      0px;
-fx-background-color:       yellow;
-fx-effect:                 null;
-fx-border-width:           1px;
-fx-border-color:           red;}

PS:对不起我的英语。 如果是JavaFX的BUG，解决问题的地方非常敏锐!

Answer 1

我已经成功地重现了您的问题，所以我一直在努力找出这种奇怪/错误行为的原因。

首先，我认为这与文本的长度有关，因为“C”的长度与“A”的长度不同。

出于调试目的，我在代码中创建了场景。

@Override
public void start(Stage primaryStage) throws IOException {
    Button bA=new Button("Button A");
    Tooltip tA=new Tooltip("Sample tooltip A");
    tA.widthProperty().addListener((obs,b,b1)->System.out.println("A: "+tA.getWidth()));
    bA.setTooltip(tA);

    Button bB=new Button("Button B");
    Tooltip tB=new Tooltip("Sample tooltip B");
    tB.widthProperty().addListener((obs,b,b1)->System.out.println("B: "+tB.getWidth()));
    bB.setTooltip(tB);

    Button bC=new Button("Button C");
    Tooltip tC=new Tooltip("Sample tooltip C");
    tC.widthProperty().addListener((obs,b,b1)->System.out.println("C: "+tC.getWidth()));
    bC.setTooltip(tC);

    Button bD=new Button("Button D");
    Tooltip tD=new Tooltip("Sample tooltip D");
    tD.widthProperty().addListener((obs,b,b1)->System.out.println("D: "+tD.getWidth()));
    bD.setTooltip(tD);

    HBox root =new HBox(10,bA,bB,bC,bD);
    Scene scene = new Scene(root, 300, 250);
    scene.getStylesheets().add(getClass().getResource("root.css").toExternalForm());
    primaryStage.setScene(scene);
    primaryStage.show();

}

我在其中添加了一个监听工具提示宽度变化的地方。

这是输出:

A: 18.0
A: 0.0
A: 95.16523742675781
A: 95.0
A: 95.16523742675781
A: 95.0

B: 18.0
B: 0.0
B: 94.43310546875
B: 94.0
B: 94.43310546875
B: 94.0

C: 18.0
C: 0.0
C: 94.9012680053711
C: 94.0
C: 94.9012680053711
C: 94.0

D: 18.0
D: 0.0
D: 95.73799133300781
D: 95.0
D: 95.73799133300781
D: 95.0

您是否注意到每个工具提示都获得了其实际宽度，然后被截断了？

这意味着“A”的工具提示被截短了一些，从 95.17 到 95，并且没有明显的指示，但是“C”从 94.90 被截短到 94，几乎 1 个像素，所以这就是为什么右边边框几乎不可见!

我无法说出这种行为的原因。但我们可以尝试解决它。​​

一个简单的解决方案是为文本提供足够的空间。在您的 FXML 文件中，这将解决问题:

<Tooltip prefWidth="100" text="Sample tooltip A" />
...
<Tooltip prefWidth="100" text="Sample tooltip C" />
...

更精确的解决方案是为每个工具提示设置所需的宽度:如果我们将文本的长度四舍五入并添加 20 像素的填充，工具提示将只宽一个像素，并且每个按钮工具提示的边框都将可见.

这就是您可以做到的(为了简单起见，对填充和边框进行了硬编码):

private final double PADDING = 9d;
private final double BORDER  = 1d;

private void setTooltipWidth(Tooltip tooltip){
    if(tooltip==null || 
        tooltip.getScene()==null || 
        tooltip.getScene().getRoot()==null){
        return;
    }
    Text text=(Text)tooltip.getScene().getRoot().lookup(".text");
    if(text==null || text.getLayoutBounds().getWidth()==0){
        return;
    }
    double width=2d*(PADDING+BORDER)+Math.ceil(text.getLayoutBounds().getWidth());
    tooltip.setPrefWidth(width);
}

现在，对于每个按钮:

tC.widthProperty().addListener((obs,b,b1)->setTooltipWidth(tC));

如果我们再次打印宽度变化，这将显示在按钮“C”上:

C: 18.0
C: 0.0
C: 94.9012680053711
C: 94.0
C: 94.9012680053711
C: 95.0

工具提示将正确显示: