javafx
layouter

StackPane

StackPane lägger ut sina barn i en bakifrån.

Barnens z-ordning definieras av ordningen på getChildren (tillgänglig genom att ringa getChildren ): det 0: e barnet är botten och sista barnet på toppen av bunten.

Stackpanelen försöker ändra storlek på varje barn för att fylla sitt eget innehållsområde. Om ett barn inte kan ändra storlek för att fylla området på StackPane (antingen för att det inte kunde ändra storlek eller dess maxstorlek förhindrade det) kommer det att justeras inom området med hjälp av alignmentProperty för stackpanelen, som är standard till Pos.CENTER.

Exempel

// Create a StackPane
StackPane pane = new StackPane();

// Create three squares
Rectangle rectBottom = new Rectangle(250, 250);
rectBottom.setFill(Color.AQUA);
Rectangle rectMiddle = new Rectangle(200, 200);
rectMiddle.setFill(Color.CADETBLUE);
Rectangle rectUpper = new Rectangle(150, 150);
rectUpper.setFill(Color.CORAL);

// Place them on top of each other
pane.getChildren().addAll(rectBottom, rectMiddle, rectUpper);

HBox och VBox

HBox och VBox layouterna är mycket lika, båda lägger ut sina barn i en enda rad.

Gemensamma egenskaper

Om en HBox eller en VBox har en kant och / eller stoppning, kommer innehållet att läggas ut inom dessa insatser.

De lägger ut varje förvaltat barn oavsett barnets synliga fastighetsvärde; obemannade barn ignoreras.

Inriktningen av innehållet styrs av justeringsegenskapen, som standard är Pos.TOP_LEFT .

HBox

HBox lägger ut sina barn i en enda horisontell rad från vänster till höger.

HBox kommer att ändra HBox barn (om de kan ändra storlek) till deras önskade bredd och använder sin fillHeight-egenskap för att bestämma om de ska ändra storlek på deras höjder för att fylla sin egen höjd eller hålla sina höjder till deras önskade (fillHeight standard till sant).

Skapa en HBox

// HBox example
HBox row = new HBox();
Label first = new Label("First");
Label second = new Label("Second");
row.getChildren().addAll(first, second);

VBOX

VBox lägger ut sina barn i en enda vertikal kolumn från topp till botten.

VBox kommer att ändra storlek på barn (om de kan ändra storlek) till deras önskade höjder och använder egenskapen fillWidth för att bestämma om du vill ändra storlek på deras bredd för att fylla sin egen bredd eller hålla deras bredder till deras önskade (fillWidth är standard till sann).

Skapa en VBox

// VBox example
VBox column = new VBox();
Label upper = new Label("Upper");
Label lower = new Label("Lower");
column.getChildren().addAll(upper, lower);

BorderPane

BorderPane är uppdelad i fem olika områden.

Gränsområdena ( Top , Right , Bottom , Left ) har föredragit storlek baserat på deras innehåll. Som standard tar de bara det de behöver, medan Center tar återstående utrymme. När gränsområdena är tomma tar de inget utrymme.

Varje område kan endast innehålla ett element. Det kan läggas till med metoderna setTop(Node) , setRight(Node) , setBottom(Node) , setLeft(Node) , setCenter(Node) . Du kan använda andra layouter för att sätta mer än ett element i ett enda område.

//BorderPane example
BorderPane pane = new BorderPane();

Label top = new Label("Top");

Label right = new Label("Right");

HBox bottom = new HBox();
bottom.getChildren().addAll(new Label("First"), new Label("Second"));

VBox left = new VBox();
left.getChildren().addAll(new Label("Upper"), new Label("Lower"));

StackPane center = new StackPane();
center.getChildren().addAll(new Label("Lorem"), new Label("ipsum"));

pane.setTop(top);        //The text "Top"
pane.setRight(right);    //The text "Right"
pane.setBottom(bottom);  //Row of two texts
pane.setLeft(left);      //Column of two texts
pane.setCenter(center);  //Two texts on each other

FlowPane

FlowPane lägger noder i rader eller kolumner baserat på tillgängligt horisontellt eller vertikalt utrymme. Den lindar noder till nästa rad när det horisontella utrymmet är mindre än summan av alla nodernas bredder; den lindrar noder till nästa kolumn när det vertikala utrymmet är mindre än summan av alla nodernas höjder. Detta exempel illustrerar den horisontella standardlayouten:

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;

public class Main extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception{
        FlowPane root = new FlowPane();
        for (int i=1; i<=15; i++) {
            Button b1=new Button("Button "+String.valueOf(i));
            root.getChildren().add(b1); //for adding button to root
        }
        Scene scene = new Scene(root, 300, 250);
        primaryStage.setTitle("FlowPane Layout");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    public static void main(String[] args) {
        launch(args);
    }
}

Standard FlowPane konstruktör:

FlowPane root = new FlowPane();

Ytterligare FlowPane konstruktörer:

FlowPane() //Creates a horizontal FlowPane layout with hgap/vgap = 0 by default.
FlowPane(double hgap, double gap) //Creates a horizontal FlowPane layout with the specified hgap/vgap.
FlowPane(double hgap, double vgap, Node... children) //Creates a horizontal FlowPane layout with the specified hgap/vgap.
FlowPane(Node... children) //Creates a horizontal FlowPane layout with hgap/vgap = 0.
FlowPane(Orientation orientation) //Creates a FlowPane layout with the specified orientation and hgap/vgap = 0.
FlowPane(Orientation orientation, double hgap, double gap) //Creates a FlowPane layout with the specified orientation and hgap/vgap.
FlowPane(Orientation orientation, double hgap, double vgap, Node... children) //Creates a FlowPane layout with the specified orientation and hgap/vgap.
FlowPane(Orientation orientation, Node... children) //Creates a FlowPane layout with the specified orientation and hgap/vgap = 0.

Att lägga till noder i layouten använder metoderna add() eller addAll() i överordnade Pane :

Button btn = new Button("Demo Button");    
root.getChildren().add(btn); 
root.getChildren().addAll(…); 

Som standard FlowPane en FlowPane från vänster till höger. För att ändra flödesinställningen, ring setAlignment() genom att mata in ett räknat värde av typen Pos .

Några vanliga flödesanpassningar:

root.setAlignment(Pos.TOP_RIGHT);     //for top right
root.setAlignment(Pos.TOP_CENTER);    //for top Center
root.setAlignment(Pos.CENTER);        //for Center
root.setAlignment(Pos.BOTTOM_RIGHT);  //for bottom right

GridPane

GridPane lägger ut sina barn i ett flexibelt rutnät med rader och kolumner.

Barn av GridPane

Ett barn kan placeras var som helst inom GridPane och kan sträcka sig över flera rader / kolumner (standardintervallet är 1) och dess placering i rutnätet definieras av dess layoutbegränsningar:

Det totala antalet rader / kolumner behöver inte anges framför eftersom rutnätfönstret automatiskt kommer att utöka / kontrahera rutnätet för att rymma innehållet.

Lägga till barn i GridPane

För att lägga till nya Node s till en GridPane layoutbegränsningar på barn bör ställas in med den statiska metoden av GridPane klass, sedan de barn kan läggas till en GridPane instans.

GridPane gridPane = new GridPane();

// Set the constraints: first row and first column
Label label = new Label("Example");
GridPane.setRowIndex(label, 0);
GridPane.setColumnIndex(label, 0);
// Add the child to the grid
gridpane.getChildren().add(label);

GridPane tillhandahåller bekväma metoder för att kombinera dessa steg:

gridPane.add(new Button("Press me!"), 1, 0); // column=1 row=0

GridPane tillhandahåller också statiska settermetoder för att ställa in rad- och kolumnspan för barnelement :

Label labelLong = new Label("Its a long text that should span several rows");
GridPane.setColumnSpan(labelLong, 2);
gridPane.add(labelLong, 0, 1);  // column=0 row=1

Storlek på kolumner och rader

Som standard kommer rader och kolumner att dimensioneras för att passa deras innehåll. Om det behövs en tydlig kontroll av rad- och RowConstraints , kan RowConstraints och ColumnConstraints instanser läggas till i GridPane . Om du lägger till dessa två begränsningar ändras storleken på exemplet ovan så att den första kolumnen är 100 pixlar, den andra kolumnen 200 pixlar lång.

gridPane.getColumnConstraints().add(new ColumnConstraints(100));
gridPane.getColumnConstraints().add(new ColumnConstraints(200));

Som standard kommer GridPane att ändra storlek på rader / kolumner till deras föredragna storlekar även om rutnätets storlek ändras större än den föredragna storleken. För att stödja dynamiska kolumn- / radstorlekar ger båda kategorierna tre egenskaper: min storlek, max storlek och önskad storlek.

Dessutom ColumnConstraints ger setHGrow och RowConstraints ger setVGrow metoder för att påverka prioriteringen av den växande och krympande. De tre fördefinierade prioriteringarna är:

• Prioritet.ALVÄGAR : Försök alltid att växa (eller krympa) genom att dela ökningen (eller minska) i rymden med andra layoutområden som har en växning (eller krympning) ALLTID
• Prioritet.SOMETIMER : Om det inte finns några andra layoutområden med växer (eller krymper) inställd på ALLTID eller om de layoutområdena inte tar upp allt det ökade (eller minskade) utrymmet, kommer de att dela ökningen (eller minskningen) i rymden med andra layoutområden för SOMETIMES.
• Prioritet.NEVER : Layoutområdet kommer aldrig att växa (eller krympa) när det finns en ökning (eller minskning) av tillgängligt utrymme i regionen.

ColumnConstraints column1 = new ColumnConstraints(100, 100, 300);
column1.setHgrow(Priority.ALWAYS);

Kolumnen definierad ovan har en minimal storlek på 100 pixlar och den kommer alltid att försöka växa tills den når sin maximala 300 pixelbredd.

Det är också möjligt att definiera procentuell storlek för rader och kolumner. Följande exempel definierar ett GridPane där den första kolumnen fyller 40% av rutnätets bredd, den andra fyller 60%.

GridPane gridpane = new GridPane();
ColumnConstraints column1 = new ColumnConstraints();
column1.setPercentWidth(40);
ColumnConstraints column2 = new ColumnConstraints();
column2.setPercentWidth(60);
gridpane.getColumnConstraints().addAll(column1, column2);

Inriktning av element inuti nätcellerna

Inriktningen av Node s kan definieras med hjälp av setHalignment metoden enligt (horisontell) ColumnConstraints klass och setValignment förfarande för (vertikal) RowConstraints klass.

ColumnConstraints column1 = new ColumnConstraints();
column1.setHalignment(HPos.RIGHT);

RowConstraints row1 = new RowConstraints();
row1.setValignment(VPos.CENTER);

TilePane

Uppsättningen av flisruta liknar FlowPane-layouten. TilePane placerar alla noder i ett rutnät där varje cell, eller kakel, har samma storlek. Den ordnar noder i snygga rader och kolumner, antingen horisontellt eller vertikalt.

    import javafx.application.Application;
    import javafx.scene.Scene;
    import javafx.scene.control.Button;
    import javafx.scene.layout.TilePane;
    import javafx.stage.Stage;
    
    public class Main extends Application {
    
        @Override
        public void start(Stage primaryStage) {
            primaryStage.setTitle("TilePane Demo");
            double width = 400;
            double height = 300;
            TilePane root = new TilePane();
            root.setStyle("-fx-background-color:blue");
            // to set horizontal and vertical gap
            root.setHgap(20);
            root.setVgap(50);
            Button bl = new Button("Buttons");
            root.getChildren().add(bl);
            Button btn = new Button("Button");
            root.getChildren().add(btn);
            Button btn1 = new Button("Button 1");
            root.getChildren().add(btn1);
            Button btn2 = new Button("Button 2");
            root.getChildren().add(btn2);
            Button btn3 = new Button("Button 3");
            root.getChildren().add(btn3);
            Button btn4 = new Button("Button 4");
            root.getChildren().add(btn4);
    
            Scene scene = new Scene(root, width, height);
            primaryStage.setScene(scene);
            primaryStage.show();
        }
    
    
        public static void main(String[] args) {
            launch(args);
        }
    }

produktion

För att skapa Tilepane

TilePane root = new TilePane();

setHgap () Och metoden setVgap () används för att skapa mellanrum mellan kolumn och kolumn. Vi kan också ställa in kolumnerna för layouten med hjälp av

int columnCount = 2;
root.setPrefColumns(columnCount);

AnchorPane

AnchorPane a är en layout som gör det möjligt att placera innehållet på ett specifikt avstånd från dess sidor.

Det finns fyra metoder för inställning och 4 metoder för att få avstånd i AnchorPane . Den första parametern för dessa metoder är Node . Sättarens andra parameter är det Double värdet som ska användas. Detta värde kan vara null indikerar ingen begränsning för den givna sidan.

I följande exempel placerar noder på specificerat avstånd från sidorna.

Den center regionen också storlek för att hålla de angivna avstånden från sidorna. Observera beteendet när fönstret ändras.

public static void setBackgroundColor(Region region, Color color) {
    // change to 50% opacity
    color = color.deriveColor(0, 1, 1, 0.5);
    region.setBackground(new Background(new BackgroundFill(color, CornerRadii.EMPTY, Insets.EMPTY)));
}

@Override
public void start(Stage primaryStage) {
    Region right = new Region();
    Region top = new Region();
    Region left = new Region();
    Region bottom = new Region();
    Region center = new Region();
    
    right.setPrefSize(50, 150);
    top.setPrefSize(150, 50);
    left.setPrefSize(50, 150);
    bottom.setPrefSize(150, 50);
    
    // fill with different half-transparent colors
    setBackgroundColor(right, Color.RED);
    setBackgroundColor(left, Color.LIME);
    setBackgroundColor(top, Color.BLUE);
    setBackgroundColor(bottom, Color.YELLOW);
    setBackgroundColor(center, Color.BLACK);
    
    // set distances to sides
    AnchorPane.setBottomAnchor(bottom, 50d);
    AnchorPane.setTopAnchor(top, 50d);
    AnchorPane.setLeftAnchor(left, 50d);
    AnchorPane.setRightAnchor(right, 50d);
    
    AnchorPane.setBottomAnchor(center, 50d);
    AnchorPane.setTopAnchor(center, 50d);
    AnchorPane.setLeftAnchor(center, 50d);
    AnchorPane.setRightAnchor(center, 50d);
    
    // create AnchorPane with specified children
    AnchorPane anchorPane = new AnchorPane(left, top, right, bottom, center);

    Scene scene = new Scene(anchorPane, 200, 200);
    
    primaryStage.setScene(scene);
    primaryStage.show();
}