在JavaFX中，是否可以在同一文本行中使用两种不同的字体大小？

Question

我正在使用Java制作Windows-run-mobile-concept股市游戏，它是JavaFX库，我想在玩家当前余额的右下角使用货币形式（以我的情况为USD） 。 要注意的是，每当玩家在游戏中获得千美元的倍数时，玩家的余额就会变大，这意味着持有玩家余额的字符串也会变大。 这导致字符串“ USD”在应用程序中的固定位置被玩家的当前余额覆盖。

我已经尝试过简单地强迫程序在数字增加千倍时移动“ USD”符号。 但是，这似乎效率很低，我敢打赌，有一种更简单的方法可以做到这一点。

    double balance = 12313.00;

    DecimalFormat decimalFormat = new DecimalFormat("#,###");
    String numberAsString = decimalFormat.format(balance);

    Text balanceText = new Text("$" + (numberAsString));
    balanceText.setFont(Font.font("Modernist", 72));
    balanceText.setFill(Color.web("77e6b3"));
    balanceText.setLayoutX(25);
    balanceText.setLayoutY(250);

    Text currencyText = new Text("USD");
    currencyText.setFont(Font.font("Modernist", 36));
    currencyText.setFill(Color.web("77e6b3"));
    currencyText.setLayoutX(275);
    currencyText.setLayoutY(250);

Answer 1

与其尝试手动设置Text节点的X / Y坐标， Text利用许多内置的JavaFX Layout Panes 。

您可以通过在JavaFX中混合不同的布局窗格来轻松构建非常复杂的UI布局。 每个Pane都可以彼此独立地设置样式和配置，并且可以对每个Pane应用不同的布局“规则”。

我建议您阅读上面的链接，以更好地了解可用的内容，但是对于您的问题，我在下面提供了一个完整的示例。

---

基本上，我们使用HBox将玩家的余额和货币名称同时保持在水平方向。 由于我们为玩家的货币使用了完全独立的Label ，因此当我们增加该Label的值或字体大小时，界面的其余部分将不受影响（这意味着货币类型可以保持相同大小）。

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class GrowingTextSample extends Application {

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

    @Override
    public void start(Stage primaryStage) {

        // Simple Interface
        VBox root = new VBox(10);
        root.setAlignment(Pos.CENTER);
        root.setPadding(new Insets(10));

        // Here we'll create a simple HBox to hold our player balance and currency type. By using a HBox, we can add
        // multiple Label (or Text) objects and style/size them separately
        HBox hbPlayerBalance = new HBox(5);
        hbPlayerBalance.setAlignment(Pos.CENTER);

        // Let's create a Label to hold the player's current balance. For this example, I'm going to use a text Label
        // to hold our Integer value. In a real application, you would want to use a special Binding to keep the TextProperty
        // of the Label in sync with an Integer or Double value.
        Label lblPlayerBalance = new Label("0");

        // Here is our label for the currency type
        Label lblCurrency = new Label("USD");

        // Add our labels to the HBox
        hbPlayerBalance.getChildren().addAll(lblPlayerBalance, lblCurrency);

        // Create a Button that simulates an increase to the player's balance. Again, this is just a crude demonstration
        // of how the layout panes (HBox, in this case) work to keep your layout clean and responsive.
        Button btnIncreaseBalance = new Button("Get Rich");

        // Add an action to our Button
        btnIncreaseBalance.setOnAction(event -> {

            // Change balance value
            lblPlayerBalance.setText("12,322,242");

            // Change balance font size. Notice changing the font size of the balance does not affect the currency Label
            lblPlayerBalance.setStyle("-fx-font-size: 200%;");

        });

        // Add the HBox and Button to our root layout
        root.getChildren().addAll(hbPlayerBalance, btnIncreaseBalance);

        // Show the stage
        primaryStage.setScene(new Scene(root));
        primaryStage.setHeight(200);
        primaryStage.setWidth(300);
        primaryStage.setTitle("GrowingTextSample Sample");
        primaryStage.show();

    }
}

---

结果：

---

注意：还有许多其他格式和样式选项可用来确保您的布局完全符合您的期望。 您需要通读JavaDocs或查找其他教程以了解更多信息。 该答案仅用于说明许多可能的解决方案之一。

Answer 2

您可以使用TextFlow来呈现多种字体，大小，样式和颜色的富文本：

样例代码

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.VPos;
import javafx.scene.Scene;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.text.*;
import javafx.scene.text.TextFlow;
import javafx.stage.Stage;

import java.text.DecimalFormat;

public class MoMoney extends Application {
    @Override
    public void start(Stage stage) throws Exception {
        double balance = 12313.00;

        DecimalFormat decimalFormat = new DecimalFormat("#,###");
        String numberAsString = decimalFormat.format(balance);

        Text balanceText = new Text("$" + (numberAsString));
        balanceText.setFont(Font.font("Modernist", 72));
        balanceText.setFill(Color.web("77e6b3"));

        Text currencyText = new Text("USD");
        currencyText.setTextOrigin(VPos.TOP);
        currencyText.setFont(Font.font("Modernist", 36));
        currencyText.setFill(Color.web("77e6b3"));

        TextFlow flow = new TextFlow(balanceText, currencyText);
        flow.setMinSize(TextFlow.USE_PREF_SIZE, TextFlow.USE_PREF_SIZE);

        VBox layout = new VBox(flow);
        layout.setPadding(new Insets(10));

        stage.setScene(new Scene(layout));
        stage.getScene().setFill(Color.rgb(35, 39, 50));
        stage.show();
    }

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

JavaDoc说明

上面链接的JavaDoc中的TextFlow描述：

TextFlow是一种特殊的布局，旨在布局富文本格式。 它可用于在单个文本流中布局多个Text节点。 TextFlow使用其内部每个Text节点的文本和字体，加上其自身的宽度和文本对齐方式来确定每个子节点的位置。

实施意见

默认情况下，如果没有足够的空间来呈现所有文本，则TextFlow会将文本换行换行，因此我将TextFlow的最小大小设置为其首选大小以防止出现这种情况。

TextFlow可以使用基于标准宽度的对齐设置（例如，左对齐，右对齐，对正等）对齐文本。但是，TextFlow没有任何方法可以垂直对齐文本，例如生成上标值。 还有其他限制，例如使文本可选择复制和粘贴或编辑文本。 因此，请看一下它，然后尝试看它是否符合您的目的，如果不行，请考虑下面提到的其他一些替代机制。

替代方法

其他有效的方法是：

1. 使用具有约束的布局容器来控制布局（如Zephyr的答案和以下相关问题： Javafx文本多字着色 ）。
2. 嵌入WebView以呈现CSS格式的html。
3. 使用第三方库，例如RichTextFX 。