如何在Javafx中对齐标签和文本字段

Question

我必须使计算器看起来像这样：

当前看起来像这样，我没有将其伸出...很近。

但是，如果我将其伸展开，它看起来像这样：

如何固定标签和文本字段的对齐方式和间距，以便它们正确对齐？当我拉开窗口时，如何解决标签和文本字段移动的事实？

这是我的代码：

import javafx.application.*;
import javafx.stage.*;
import javafx.scene.layout.*;
import javafx.scene.*;
import javafx.scene.control.*;
import javafx.geometry.*;

public class SimpleCalculator extends Application {
    public static void main(String args[]) {
        launch(args);
    }

    public void start(Stage myStage) {
        myStage.setTitle("Simple Calculator");
        FlowPane rootNode = new FlowPane();
        rootNode.setAlignment(Pos.CENTER);

        Scene myScene = new Scene(rootNode, 300, 200);
        Label firstValueLabel = new Label("First Value:");
        Label secondValueLabel = new Label("Second Value:");
        Label thirdValueLabel = new Label("Third Value:");
        TextField firstValueField = new TextField("$");
        TextField secondValueField = new TextField("$");
        TextField thirdValueField = new TextField("$");
        firstValueField.setPrefColumnCount(14);
        secondValueField.setPrefColumnCount(14);
        thirdValueField.setPrefColumnCount(14);

        // we don't want the sum field to be editable
        thirdValueField.setEditable(false);
        Button btnCalculate = new Button("Calculate");

        rootNode.getChildren().addAll(firstValueLabel, firstValueField, secondValueLabel, secondValueField, thirdValueLabel, thirdValueField, btnCalculate);

        myStage.setScene(myScene);
        myStage.show();
    }
}