Выровняйте Hbox по центру внизу внутри StakePanel

Question

Я изучаю макеты Javafx, и я хотел бы получить следующий результат:

HBox в нижнем центре для панели, которая у меня попробовал использовать следующий код, но я не могу этого сделать

Не могли бы вы объяснить, что я делаю не так? и как этого добиться?

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.HBox;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;



public class TestLayout extends Application {

    @Override
    public void start(Stage stage) {
        initUI(stage);
    }

    private void initUI(Stage stage) {
        Scene scene =null;
        HBox hbox = new HBox();
        hbox.setStyle("-fx-background-color: #FFFAAA;");
        StackPane pane = new StackPane();
        hbox.setStyle("-fx-background-color: #AAFAAA;");
        hbox.prefWidthProperty().bind(pane.widthProperty().divide(4));
        hbox.prefHeightProperty().bind(pane.heightProperty().divide(10));

        pane.getChildren().add(hbox);

        scene = new Scene(pane, 600, 600);
        pane.prefWidthProperty().bind(scene.widthProperty());
        pane.prefHeightProperty().bind(scene.heightProperty());

        stage.setTitle("Test");
        stage.setScene(scene);
        stage.show();
    }

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


}

class AppLauncherTest {
    public static void main(String[] args) {
        TestLayout.main(args);
    }
}

Answer 1

Я бы использовал VBox или BorderPane в качестве узла root. В этом примере я использую VBox. Я предполагаю, что больше узлов будут go в это, поэтому я использовал StackPane в качестве верхнего узла. Возможно, это потребуется изменить, или может потребоваться добавить к нему другой Pane. Это зависит от того, что вы пытаетесь сделать с конечным продуктом. Для нижней части я использовал HBox и установил его Margins.

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

/**
 * JavaFX App
 */
public class App extends Application {

    @Override
    public void start(Stage stage) {        
        StackPane subRootTop = new StackPane();     
        VBox.setVgrow(subRootTop, Priority.ALWAYS); 
        //subRootTop.setStyle("-fx-background-color: yellow;");

        HBox subRootBotton = new HBox();
        VBox.setVgrow(subRootBotton, Priority.ALWAYS);      
        subRootBotton.setStyle("-fx-background-color: green;");
        subRootBotton.setMaxHeight(150);
        VBox.setMargin(subRootBotton, new Insets(40, 40, 40, 40));

        VBox root = new VBox(subRootTop, subRootBotton);
        root.setStyle("-fx-background-color: red;");
        Scene scene = new Scene(root, 600, 600);;

        stage.setTitle("Test");
        stage.setScene(scene);
        stage.show();
    }

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

}

Answer 2

Привязка StackPane не размера не должна выполняться. Сцена автоматически изменяет размер root, чтобы заполнить всю доступную область. Предполагая, что вам нужны относительные размеры, использование StackPane на самом деле не лучший выбор.

Если вы хотите, чтобы у ребенка было фиксированное расстояние слева, справа и снизу от StackPane, вы можете сделать это, указав поля и выравнивание. Убедитесь, что ребенок не вырастает до размеров родителя, установив maxHeight на использование предпочтительной высоты:

private void initUI(Stage stage) {
    HBox hbox = new HBox();
    hbox.setStyle("-fx-background-color: #FFFAAA;");
    hbox.setMaxHeight(Region.USE_PREF_SIZE);

    // could be calculated based on children instead of assigning
    // an absolute value
    hbox.setPrefHeight(30);

    StackPane.setAlignment(hbox, Pos.BOTTOM_CENTER);
    StackPane.setMargin(hbox, new Insets(20));

    StackPane pane = new StackPane(hbox);
    pane.setStyle("-fx-background-color: #AAFAAA;");

    Scene scene = new Scene(pane, 600, 600);

    stage.setTitle("Test");
    stage.setScene(scene);
    stage.show();
}

Answer 3

Возможно, вы можете использовать AnchorPane в качестве базового макета вместо StacKPane. Я сделал небольшой пример, как это будет выглядеть. Конечно, вы можете оставить StackPane в качестве базового макета и просто поместить на него AnchorPane с HBox, но вы обязательно должны использовать AnchorPane для своего плана.

package sample;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class Main extends Application {

    private void initUI(Stage stage) {

        // Create an anchor pane as base layout and set a color:
        AnchorPane root = new AnchorPane();
        root.setStyle("-fx-background-color: #FFFAAA;");

        // Create a second container and set a minimum height and a color;
        HBox hbox = new HBox();
        hbox.setMinHeight(100d);
        hbox.setStyle("-fx-background-color: #AAFAAA;");

        // Give the child container a fixed location:
        AnchorPane.setBottomAnchor(hbox, 50d);
        AnchorPane.setLeftAnchor(hbox, 75d);
        AnchorPane.setRightAnchor(hbox, 75d);

        // Add the horizontal box to the base anchor pane:
        root.getChildren().add(hbox);

        stage.setScene(new Scene(root, 600, 600));
        stage.show();
    }

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

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

Предварительный просмотр: