JavaFX – 在场景中创建多个面板

huangapple go评论59阅读模式
英文:

JavaFX -- Creating multiple panes within a scene

问题

public class ZodiacGUI extends Application {

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

    @Override
    public void start(Stage primaryStage) throws Exception {
        BorderPane mainPane = new BorderPane();
        mainPane.setStyle("-fx-background-color: PINK");
        setupControls(mainPane);
        Scene scene = new Scene(mainPane);
        setStage(primaryStage, scene);
    }

    public void setStage(Stage primaryStage, Scene scene) {
        primaryStage.setWidth(500);
        primaryStage.setHeight(200);
        primaryStage.setTitle("What is my Zodiac Sign?");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public void setupControls(BorderPane mainPane) {
        VBox topPane = new VBox();
        HBox centerPane = new HBox();
        VBox bottomPane = new VBox();

        topPane.setAlignment(Pos.TOP_LEFT);
        topPane.setSpacing(10);

        centerPane.setAlignment(Pos.CENTER);
        centerPane.setSpacing(10);

        bottomPane.setAlignment(Pos.CENTER);
        bottomPane.setSpacing(10);

        Label label = new Label("Enter your birthday formatted as -> mm/dd");
        TextField userInput = new TextField();
        userInput.setPromptText("Enter birthday");

        Button exitButton = new Button("Exit");
        Button findSign = new Button("Find my sign");
        Button clear = new Button("Clear");

        exitButton.setOnAction(e -> System.exit(0));

        topPane.getChildren().addAll(label, userInput);
        centerPane.getChildren().addAll(clear, exitButton, findSign);
        bottomPane.getChildren().addAll(new Label("Prompting the sign"));

        mainPane.setTop(topPane);
        mainPane.setCenter(centerPane);
        mainPane.setBottom(bottomPane);
    }
}
英文:

So I have to make a Zodiac Sign GUI, and we are tasked with having the following:

  • a Label in the top left, and a TextField in the top right (both with padding)
  • an exit Button in the center of the GUI, along with a clear and find my sign on either side
  • and finally, a Label in the bottom center prompting the sign

I am utterly confused on how to have this come out, as I am a novice in JavaFX. I believe I would need a branch node along with the root node in order to get this kind of layout. I do not need assistance in instantiating the button, labels etc., mainly confused with how this layout can even work. The code I have now is the following:

public class ZodiacGUI extends Application {
public static void main(String args[]) {
Application.launch(args);
}
@Override
public void start(Stage primaryStage) throws Exception {
BorderPane mainPane = new BorderPane();
mainPane.setStyle("-fx-background-color: PINK");
setupControls(mainPane);
Scene scene = new Scene(mainPane);
setStage(primaryStage, scene);
}
public void setStage(Stage primaryStage, Scene scene) {
primaryStage.setWidth(500);
primaryStage.setHeight(200);
primaryStage.setTitle("What is my Zodiac Sign?");
primaryStage.setScene(scene);
primaryStage.show();
}
public void setupControls(BorderPane mainPane) {
Label label = new Label("Enter you birthday formatted as -> mm/dd");
Button exitButton = new Button();
Button findSign = new Button();
Button clear = new Button();
TextField userInput = new TextField();
userInput.setPromptText("Enter birthday");
exitButton.setText("Exit.");
findSign.setText("Find my sign.");
clear.setText("Clear.");
exitButton.setOnAction(e -> System.exit(0));
mainPane.setLeft(label);
mainPane.setRight(userInput);
mainPane.setCenter(exitButton);
mainPane.setCenter(findSign);
mainPane.setCenter(clear);
BorderPane.setAlignment(label, Pos.TOP_LEFT);
BorderPane.setAlignment(userInput, Pos.TOP_RIGHT);
BorderPane.setAlignment(exitButton, Pos.CENTER);
BorderPane.setAlignment(findSign, Pos.CENTER_LEFT);
BorderPane.setAlignment(clear, Pos.CENTER_RIGHT);
}
}

This only outputs one of the buttons out of the three, as I assume it is because the necessary addition of another BorderPane? Here is a drawn out picture of what I would like to come out with:

JavaFX – 在场景中创建多个面板

Just to clarify, I do not need assistance with the handling of finding the zodiac sign, etc. Mainly need assistance on the layout, as it has stumped me for days. Thank you in advance for helping out a novice to JavaFX :).

答案1

得分: 0

你可能想使用GridPane

GridPane grid = new GridPane();
grid.add(label, 0, 0);
grid.add(userInput, 2, 0);
grid.add(findSign, 0, 1);
grid.add(exitButton, 1, 1);
grid.add(clear, 2, 1);

或者使用带有BorderPane的VBox来帮助布局和对齐:

BorderPane mainPane = new BorderPane();
BorderPane centerPane = new BorderPane();

mainPane.setLeft(label);
mainPane.setRight(userInput);

centerPane.setLeft(findSign);
centerPane.setRight(clear);
centerPane.setCenter(exitButton);

BorderPane.setAlignment(label, Pos.LEFT);
BorderPane.setAlignment(userInput, Pos.RIGHT);
BorderPane.setAlignment(exitButton, Pos.CENTER);
BorderPane.setAlignment(findSign, Pos.LEFT);
BorderPane.setAlignment(clear, Pos.RIGHT);

VBox items = new VBox();
items.getChildren().addAll(mainPane, centerPane);
英文:

You might want to use a GridPane

GridPane grid = new GridPane();
grid.add(label,0,0);
grid.add(userInput,2,0);
grid.add(findSign,0,1);
grid.add(exitButton,1,1);
grid.add(clear,2,1);

or use a VBox with BorderPane to help with the layout/alignment

BorderPane mainPane, centerPane;
mainPane.setLeft(label);
mainPane.setRight(userInput);
centerPane.setLeft(findSign);
centerPane.setRight(clear);
centerPane.setCenter(exitButton);
BorderPane.setAlignment(label, Pos.LEFT);
BorderPane.setAlignment(userInput, Pos.RIGHT);
BorderPane.setAlignment(exitButton, Pos.CENTER);
BorderPane.setAlignment(findSign, Pos.LEFT);
BorderPane.setAlignment(clear, Pos.RIGHT);
VBox items = new VBox();
items.getChildren().addAll(mainPane, centerPane);
</details>
# 答案2
**得分**: 0
有三行,每行的子元素数量不同。如果一行有多个子元素,可以使用 HBox。
```java
BorderPane mainPane = new BorderPane();
mainPane.setTop(new HBox(topLabel, topField));
mainPane.setCenter(new HBox(centerLabel, centerField, centerButtom));
mainPane.setBottom(bottomCenterButton);

如果你需要超过三行(BorderPane 的顶部、中间、底部部分),可以使用 VBox,其中每个子元素都是一行,如下所示:

HBox row1 = new HBox(child1, child2);
HBox row2 = new HBox(child1, child2, child3);
HBox row3 = new HBox(child1);
HBox row4 = new HBox(child1, child2);
VBox pane = new VBox(row1, row2, row3, row4);
英文:

You have three rows with diffrent number of children. You can use HBox if row have more than one child.

BorderPane mainPane = new BorderPane();
mainPane.setTop(new HBox(topLabel, topField));
mainPane.setCenter(new HBox(centerLabel, centerField, centerButtom));
mainPane.setBottom(bottomCenterButton);

If you need more than 3 rows (top, center, bottom section of BorderPane) you can use VBox, where every child is row like:

HBox row1 new HBox(child1, child2)
HBox row2 new HBox(child1, child2, child3)
HBox row3 new HBox(child1)
HBox row4 new HBox(child1, child2)
VBox pane = new VBox(row1, row2, row3, row4);

huangapple
  • 本文由 发表于 2020年5月5日 04:20:44
  • 转载请务必保留本文链接:https://go.coder-hub.com/61600912.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定