java - 无法对齐堆栈 Pane 内的文本字段

Question

我有一个 StackPane，我需要在其中添加四个文本字段和一个图表。这些文本字段将用于设置图表轴的范围。我选择 StackPane 是因为它可以在稍后包含的停靠 Pane 中很好地重新缩放(与图表一起)。我没有将文本字段嵌入到 VBox 或 HBox 中，因为它们给我稍后添加到 Pane 中的缩放矩形(可缩放)带来了麻烦。

除了我无法设置靠近边框的 TextField 和 StackPane 之间的距离之外，一切正常。我所能控制的只是一般定位，例如 pane.setAlignment(upperY, Pos.TOP_LEFT)。但这意味着我的两个 TextField 在左下角重叠。任何人都知道如何解决这个问题，无论是通过 CSS 还是直接在 Java 代码中？

我尝试在 CSS 中设置 -fx-alignment 。我尝试更改 Pane 的类型。我尝试在 CSS 等中设置边框插入。

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.control.TextField;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.layout.Priority;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class Main extends Application
{
    static LineChart<Number, Number> chart; 

    @Override
    public void start(Stage stage) throws Exception 
        {

            TextField upperY = new TextField("upperY");  upperY.getStylesheets().add("css/chart.css"); 
            TextField lowerY = new TextField("lowerY");  lowerY.getStylesheets().add("css/chart.css"); 
            TextField rightX = new TextField("rightX");  rightX.getStylesheets().add("css/chart.css"); 
            TextField leftX = new TextField("leftX");  leftX.getStylesheets().add("css/chart.css"); 


            StackPane pane = new StackPane();
            HBox.setHgrow(pane, Priority.ALWAYS);
            VBox.setVgrow(pane, Priority.ALWAYS);

            pane.setAlignment(upperY, Pos.TOP_LEFT);
            pane.setAlignment(lowerY, Pos.BOTTOM_LEFT);
            pane.setAlignment(rightX, Pos.BOTTOM_RIGHT);
            pane.setAlignment(leftX, Pos.BOTTOM_LEFT);

            chart = new LineChart<>(new NumberAxis(), new NumberAxis());

            pane.getChildren().addAll(chart, upperY, lowerY, leftX, rightX);

            Pane root = new Pane();
            root.getChildren().add(pane);
            Scene scene = new Scene(root);
            stage.setScene(scene);
            stage.show();
        } // end start

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

.text-field{
    -fx-font-size: 10pt;
    -fx-min-width: 35;
    -fx-pref-width: 35;
    -fx-max-width: 35;    
    -fx-min-height: 18;
    -fx-pref-height: 18; 
    -fx-max-height: 18;
    -fx-font-family: "Arial Narrow";
    -fx-text-fill: black;
    -fx-alignment: BASELINE_CENTER;
    -fx-padding: -2 2 0 2;  /*   // T R B L*/  
    -fx-background-color: white; 
    -fx-control-inner-background: white;
    -fx-border-color: lightgray;
    -fx-border-insets: 0 0 0 0; 
    -fx-background-insets: 0 0 0 0;
}

我需要将 leftX 文本字段向右推，并将 lowerY 文本字段向上推一点。

Answer 1

布局的工作方式类似于GridPane。唯一的问题是，对图表使用列/行跨度会导致图表不用于计算 GridPane 的首选大小。

但是，您可以使用 HBox 和 VBox 分别保存底部和左侧文本字段，并将 VBox 和图表放在第一行和图表下方单元格中的 HBox。

为了简单起见，以下示例使用 Region 而不是图表，但调整代码以使用不同的节点类型很简单:

private static TextField createTextField(String prompt) {
    TextField tf = new TextField(prompt);
    return tf;
}

@Override
public void start(Stage primaryStage) throws Exception {
    // Using simple region instead of a chart for simplicity here
    Region chart = new Region();
    chart.setStyle("-fx-background-color: red;");
    chart.setPrefSize(300, 300);

    // create textfield container to the left
    Region placeholder = new Region();
    VBox.setVgrow(placeholder, Priority.ALWAYS);
    VBox left = new VBox(
            createTextField("upperY"),
            placeholder,
            createTextField("lowerY"));

    // create textfield container to the bottom
    placeholder = new Region();
    HBox.setHgrow(placeholder, Priority.ALWAYS);
    HBox bottom = new HBox(
            createTextField("leftX"),
            placeholder,
            createTextField("rightX"));

    GridPane container = new GridPane();
    container.add(left, 0, 0);
    container.add(bottom, 1, 1);
    container.add(chart, 1, 0);

    // make sure the row/column containing the chart is the one that grows
    ColumnConstraints cConstraints = new ColumnConstraints();
    cConstraints.setHgrow(Priority.ALWAYS);
    container.getColumnConstraints().addAll(new ColumnConstraints(), cConstraints);

    RowConstraints rConstraints = new RowConstraints();
    rConstraints.setVgrow(Priority.ALWAYS);
    container.getRowConstraints().addAll(rConstraints, new RowConstraints());

    Scene scene = new Scene(container);

    primaryStage.setScene(scene);
    primaryStage.show();
}