Introduktion till JavaFX-layouter
Användargränssnittlayouter är centrum för gränssnittsdesign. Många av de grafiska ramarna för användargränssnitt erbjuder stöd för layouter i form av API: er (Application Programming Interfaces). I JavaFX tillhandahålls också ett rikt antal layouter som hjälper till att uppfylla många av begränsningarna för att hantera det konsekventa utseendet och känslan. Endast det minsta antalet parametrar behöver ställas in i detta fall. Layouter kan vara av olika typer och det förklaras i följande avsnitt i detalj.
Topp 5 JavaFX-layouter
Som redan diskuterats kan layouter av JavaFX vara av olika typer som VBox, HBox, BorderPane, FlowPane, StackPane, AnchorPane, TilePane, GridPane, etc. I det här avsnittet kommer vi att diskutera fem av dem.
1. VBox
VBox hjälper till med att organisera noden i en vertikal kolumn. I detta kan innehållsområdets standardhöjd visa barnen i den önskade höjden och standardbredden är den största av barnbredden. Även om platserna inte kan ställas in för barnen eftersom de automatiskt beräknas, kan de kontrolleras i viss utsträckning genom anpassning av VBox-egenskaper.
Koda:
// Java Program to create a VBox
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;
public class JFXLayouts extends Application (
// start method helps in launching the application
public void start(Stage stage)
(
// Title set
stage.setTitle("Example for VBox");
// VBox creation
VBox vb = new VBox(10);
// Label creation
Label lb = new Label("this is VBox example");
// Add the created label to vbox
vb.getChildren().add(lb);
// add the buttons to VBox
vb.getChildren().add(new Button("Click A"));
vb.getChildren().add(new Button("Click B"));
vb.getChildren().add(new Button("Click C"));
// Scene creation
Scene scene = new Scene(vb, 300, 300);
// Scene setting
stage.setScene(scene);
stage.show();
)
// Main Method
public static void main(String args())
(
//method to launch the JavaFX application
launch(args);
)
)
Produktion:
Här är 3 knappar A, B och C arrangerade horisontellt.
2. HBox
HBox fungerar i det motsatta konceptet av VBox. Det vill säga noder kommer att organiseras horisontellt. Följande är ett program som hjälper till att förstå HBox.
Koda:
// Java Program to create an HBox
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;
public class JFXLayouts extends Application (
// start method helps in launching the application
public void start(Stage stage)
(
// Title set
stage.setTitle("Example for HBox");
// HBox creation
HBox hb = new HBox(10);
// Label creation
Label lb = new Label("this is HBox example");
// Add the created label to Hbox
hb.getChildren().add(lb);
// add the buttons to Hbox
hb.getChildren().add(new Button("Click A"));
hb.getChildren().add(new Button("Click B"));
hb.getChildren().add(new Button("Click C"));// Scene creation
Scene scene = new Scene(hb, 300, 300);
// Scene setting
stage.setScene(scene);
stage.show();
)
// Main Method
public static void main(String args())
(
//method to launch the JavaFX application
launch(args);
)
)
Produktion:
I detta fall är 3 knappar A, B och C arrangerade horisontellt.
3. BorderPane
I detta har layoutstrukturen fem regioner som TOP, BOTTOM, CENTER, VÄNSTER och HÖGER.
Koda:
// Java Program to create an BorderPane
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;
public class JFXLayouts extends Application (
// start method helps in launching the application
public void start(Stage stage)
(
BorderPane bp = new BorderPane();
bp.setTop(new TextField("A-Top"));
bp.setBottom(new TextField("B-Bottom"));
bp.setLeft(new TextField("C-Left"));
bp.setRight(new TextField("D-Right"));
bp.setCenter(new TextField("E-Center"));// Scene creation
Scene scene = new Scene(bp);// Title set
stage.setTitle("Example for BorderPane");
// Scene setting
stage.setScene(scene);
stage.show();
)
// Main Method
public static void main(String args())
(
//method to launch the JavaFX application
launch(args);
)
)
Produktion:
Här skickas 5 textfält igen i fältets fem riktningar.
4. FlowPane
FlowPane tillåter användaren att lägga upp noderna i följd och linda in noderna vid gränsen. Här kan noderna vara i vertikal riktning (kolumner) eller horisontell riktning (rader).
Koda:
// Java Program to create a flowpane
import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.FlowPane;
import javafx.scene.shape.Sphere;
import javafx.stage.Stage;
public class JFXLayouts extends Application (
// start method helps in launching the application
public void start(Stage stage)
(
//create buttons
Button b1 = new Button("Button A");
Button b2 = new Button("Button B");
Button b3 = new Button("Button C");
Button b4 = new Button("Button D");
//Flow Pane creation
FlowPane fp = new FlowPane();
//Set horizontal gap
fp.setHgap(25);
//Set margin
fp.setMargin(b1, new Insets(20, 0, 20, 20));
ObservableList list = fp.getChildren();
//Add nodes to the flow pane
list.addAll(b1, b2, b3, b4);
// Scene creation
Scene scene = new Scene(fp);
// Title set
stage.setTitle("Example for BorderPane");
// Scene setting
stage.setScene(scene);
stage.show();
)
// Main Method
public static void main(String args())
(
//method to launch the JavaFX application
launch(args);
)
)
Produktion:
5. StackPane
I denna layout placeras alla noder i en enda stack. Det vill säga, noder är ordnade precis som i en bunt ovanpå en annan.
Koda:
// Java Program to create a flowpane
import javafx.application.Application;
import javafx.scene.shape.Sphere;
import javafx.collections.ObservableList;
import javafx.scene.text.Font;
import javafx.geometry.Insets;
import javafx.scene.text.FontWeight;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.shape.Circle;
import javafx.scene.text.Text;
import javafx.stage.Stage;
import javafx.scene.paint.Color;
public class JFXLayouts extends Application (
@Override
public void start(Stage stage) (
//draw a sphere
Sphere sph = new Sphere(50);
//text creation
Text t = new Text("DEMO");
//Set font of the text
t.setFont(Font.font(null, FontWeight.BOLD, 13));
//Set color of the text
t.setFill(Color.RED);
//set position of the text
t.setX(20);
t.setY(50);
//Create a Stackpane
StackPane sp = new StackPane();
ObservableList list = sp.getChildren();
//Add nodes to the pane
list.addAll( sph, t);
// Scene creation
Scene scene = new Scene(sp);
// Title set
stage.setTitle("Example for BorderPane");
// Scene setting
stage.setScene(scene);
stage.show();
)
// Main Method
public static void main(String args())
(
//method to launch the JavaFX application
launch(args);
)
)
Produktion:
Slutsats
JavaFX Layouts hjälper till att skapa gränssnittsdesignen i en konsekvent look and feel. Layouter kan vara av olika slag och de kan väljas utifrån användarens krav. I detta dokument diskuteras fem av JavaFX-layouterna i detalj.
Rekommenderade artiklar
Detta är en guide till JavaFX-layouter. Här diskuterar vi de 5 översta layouterna av JavaFX som VBox, HBox, BorderPane, FlowPane och StackPane tillsammans med exempel och implementering av kod. Du kan också titta på följande artiklar för att lära dig mer -
- Break Statement i Java
- JList i Java
- JPanel i Java
- För Loop i Java
- Komplett guide till JavaFX-etikett
- Break Statement i JavaScript
- HTML-layout
- Typer och hur man skapar JavaFx-diagram?
- Hur matar du in text i JavaFX TextField?
- Konstruktörer och metoder för JavaFx-knapp
- Topp 15 metoder för HBox i JavaFX
- Hur skapar jag kryssrutan i JavaFX med exempel?
- JavaFX VBox | Metoder för JavaFX VBox
- Olika metoder för JavaFX StackPane