JavaFX工具提示-邊框顏色錯誤

Question

我在JavaFX中使用工具提示時遇到問題。 為了說明這個問題的核心，我通過IntelliJ Idea創建了一個新的JavaFX項目。 該項目的根窗格是HBox，其alignment="CENTER"並且該HBox包含四個按鈕（文本：Button AD）。 每個按鈕都設置了帶有文本的工具提示：示例工具提示AB。 通過fxml文件，我還加載了保存在名為styles.css的文件中的級聯樣式。

問題描述：我啟動了應用程序，當我將鼠標懸停在第一個按鈕上時，它的工具提示看起來完全像CSS文件描述的那樣。 當我將鼠標懸停在第二個按鈕上時，工具提示的右邊框會稍微變亮。 但是，當我將鼠標懸停在第三個或第四個按鈕上時，工具提示的右紅色邊框會稍微可見，而我們可以看到它的背景（黃色）和邊框顏色的混合。 沒有其他邊界在這樣​​做，只有正確的邊界。 這是非常奇怪的行為。

我嘗試過的事情：我嘗試更改字體系列，字體大小和填充。

我的問題：是什么原因導致此問題？ 您對此問題有解決方案嗎？ 而且您也遇到了麻煩嗎？

屏幕截圖顯示了我描述的問題

*鼠標光標懸停在按鈕C上

Main.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>

styles.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的錯誤，那么解決問題所在就非常迫切！

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" />
...

更為精確的解決方案是為每個工具提示設置所需的寬度：如果我們舍入文本的長度並添加20px的填充，則工具提示將僅寬一個像素，並且每個按鈕工具提示都將顯示邊框。

這是您可以做到的方式（為簡單起見，對填充和邊框進行了硬編碼）：

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

並且工具提示將正確顯示：

Answer 2

嘗試使邊框透明：

.tooltip{
 -fx-text-fill:              black;
 -fx-background-radius:      0px;
 -fx-background-color:       transparent,red,yellow;
 -fx-background-insets:      0, 1, 2;
 -fx-effect:                 null;
}