JavaFX UI控件教程（二十一）之Tooltip

翻译自  Tooltip

在本章中，您将了解工具提示，即当鼠标光标悬停该控件时，可以为任何UI控件设置的控件。

的Tooltip类表示通常用于显示关于所述用户接口的控制附加信息的公共UI组件。可以通过调用setTooltip方法在任何控件上设置工具提示。

工具提示有两种不同的状态：激活和显示。激活工具提示后，鼠标移动到控件上。当工具提示处于显示状态时，它实际上会出现。显示的工具提示也被激活。工具提示激活时和实际显示之间通常会有一些延迟。

带有工具提示的密码字段如图20-1所示。

图20-1添加到密码字段的工具提示

 

创建工具提示

研究示例20-1中的代码片段，该代码片段使用上图所示的JavaFX应用程序中的工具提示创建密码字段。

示例20-1在密码字段中添加工具提示

final PasswordField pf = new PasswordField();
final Tooltip tooltip = new Tooltip();
tooltip.setText(
    "\nYour password must be\n" +
    "at least 8 characters in length\n"  +
);
pf.setTooltip(tooltip);

javafx.scene.control包中的每个UI控件都有setTooltip添加工具提示的方法。您可以在Tooltip构造函数中或使用该setText方法定义文本标题。

由于Tooltip该类是类的扩展，因此Labeled您不仅可以添加文本标题，还可以添加图形图标。例20-2中的代码片段在密码字段的工具提示中添加了一个图标。

示例20-2在工具提示中添加图标

Image image = new Image(
    getClass().getResourceAsStream("warn.png")
);
tooltip.setGraphic(new ImageView(image));

将此代码片段添加到应用程序并编译并运行代码后，将显示图20-2中所示的工具提示。

图20-2带图标的工具提示

工具提示不仅可以包含附加信息或辅助信息，还可以包含数据。

 

在工具提示中显示应用程序数据

图20-3中的应用程序使用工具提示中显示的信息来计算酒店住宿的总成本

图20-3计算酒店价格

每个复选框都附有工具提示。每个工具提示都会显示特定预订选项的费率。如果用户选中复选框，则会将相应的值添加到总计。如果取消选中所选复选框，则会从总计中扣除相应的值。

查看例20-3中显示的应用程序的源代码。

示例20-3使用工具提示计算酒店价格

import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.geometry.Insets;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.CheckBox;
import javafx.scene.control.Label;
import javafx.scene.control.Tooltip;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;
import javafx.stage.Stage;
 
 
public class Main extends Application {
 
    final static String[] rooms = new String[]{
        "Accommodation (BB)",
        "Half Board",
        "Late Check-out",
        "Extra Bed"
    };
    final static Integer[] rates = new Integer[]{
        100, 20, 10, 30
    };
    final CheckBox[] cbs = new CheckBox[rooms.length];
    final Label total = new Label("Total: $0");
    Integer sum = 0;
 
    public static void main(String[] args) {
        launch(args);
    }
 
    @Override
    public void start(Stage stage) {
        Scene scene = new Scene(new Group());
        stage.setTitle("Tooltip Sample");
        stage.setWidth(300);
        stage.setHeight(150);
 
        total.setFont(new Font("Arial", 20));
        
        for (int i = 0; i < rooms.length; i++) {
            final CheckBox cb = cbs[i] = new CheckBox(rooms[i]);
            final Integer rate = rates[i];
            final Tooltip tooltip = new Tooltip("$" + rates[i].toString());
            tooltip.setFont(new Font("Arial", 16));
            cb.setTooltip(tooltip);
            cb.selectedProperty().addListener(new ChangeListener() {
                public void changed(ObservableValue ov,
                    Boolean old_val, Boolean new_val) {
                    if (cb.isSelected()) {
                        sum = sum + rate;
                    } else {
                        sum = sum - rate;
                    }
                    total.setText("Total: $" + sum.toString());
                }
            });
        }
 
        VBox vbox = new VBox();
        vbox.getChildren().addAll(cbs);
        vbox.setSpacing(5);
        HBox root = new HBox();
        root.getChildren().add(vbox);
        root.getChildren().add(total);
        root.setSpacing(40);
        root.setPadding(new Insets(20, 10, 10, 20));
 
        ((Group) scene.getRoot()).getChildren().add(root);
 
        stage.setScene(scene);
        stage.show();
    }
}

中的代码行实施例20-4在用实施例20-3创建工具提示和分配文本字幕到它。该Integer期权价格的值转换成String数值。

示例20-4设置工具提示的值

final Tooltip tooltip = new Tooltip("$" + rates[i].toString())

您可以通过应用CSS来改变工具提示的视觉外观。

 

相关的API文档 

• Tooltip

• Labeled