Невозможно выровнять текстовое поле внутри панели стека

Question

У меня есть StackPane, где мне нужно добавить четыре текстовых поля и диаграмму. Эти текстовые поля будут использоваться для установки диапазона осей диаграммы. Я выбрал StackPane, потому что он хорошо масштабируется (вместе с диаграммой) на панели док-станции, в которую он позже включен. Я не встраивал текстовые поля в VBox или HBox, потому что они доставляли мне проблемы с масштабирующим прямоугольником (масштабируемым), добавленным позже на панель.

Все работает, кроме того, что я не могу установить расстояние между TextField s и StackPane вблизи границ. Все, что я мог контролировать, это общее позиционирование, подобное pane.setAlignment(upperY, Pos.TOP_LEFT). Но это означает, что два моих TextField перекрываются в левом нижнем углу. Кто-нибудь знает, как это исправить, с помощью CSS или непосредственно в коде Java?

Я попытался установить -fx-alignment в CSS. Я попытался изменить тип панели. Я пытался установить границы вставки в 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 и a 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();
}