在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 。