JavaFX 修复 Pane 布局

Question

我希望通过向 Pane 添加 gridPanes 来使用 JavaFX 来建模简单的微波炉。 Microwave

上面是结果应该是什么样的，但我在正确布局网格 Pane 时遇到了问题。

任何有关我如何改进这一点的帮助将不胜感激。这是我的结果以及与之配套的代码。

my output

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
import javafx.geometry.Insets;
import javafx.scene.control.TextField;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.Priority;
import javafx.scene.layout.Pane;
import javafx.scene.control.Label;

public class Microwave extends Application
{
    @Override
    public void start(Stage primaryStage)
    {
        Pane root = new Pane();
        GridPane gPane1 = new GridPane();
        GridPane gPane2 = new GridPane();
        TextField time = new TextField("Time to be displayed here");
        Label food = new Label("Place food here");

        Button start_button = new Button("Start");
        Button stop_button = new Button("Stop");
        Button button_0 = new Button("0");
        Button button_1 = new Button("1");
        Button button_2 = new Button("2");
        Button button_3 = new Button("3");
        Button button_4 = new Button("4");
        Button button_5 = new Button("5");
        Button button_6 = new Button("6");
        Button button_7 = new Button("7");
        Button button_8 = new Button("8");
        Button button_9 = new Button("9");

        gPane1.add(start_button, 1, 3);
        gPane1.add(stop_button, 2, 3);
        gPane1.add(button_0, 0, 3);
        gPane1.add(button_1, 0, 0);
        gPane1.add(button_2, 1, 0);
        gPane1.add(button_3, 2, 0);
        gPane1.add(button_4, 0, 1);
        gPane1.add(button_5, 1, 1);
        gPane1.add(button_6, 2, 1);
        gPane1.add(button_7, 0, 2);
        gPane1.add(button_8, 1, 2);
        gPane1.add(button_9, 2, 2);

        gPane2.add(time,0,0);

        root.getChildren().addAll(gPane1,gPane2,food);      

        Scene scene = new Scene(root,200,50);
        primaryStage.setTitle("Microwave Oven");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

}

Answer 1

这是在 SceneBuilder 中创建的示例。您可以使用 FXML 来了解如何在代码中执行此操作。

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.VBox?>

<HBox alignment="CENTER" prefHeight="300.0" prefWidth="500.0" style="-fx-border-color: black; -fx-border-width: 3px;" xmlns="http://javafx.com/javafx/8.0.141" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Label alignment="CENTER" text="Place Food Here">
         <HBox.margin>
            <Insets left="10.0" right="10.0" />
         </HBox.margin>
      </Label>
      <VBox style="-fx-border-color: black; -fx-border-width: 3px;" HBox.hgrow="ALWAYS">
         <children>
            <TextField prefHeight="50.0" promptText="Time to be displayed here">
               <VBox.margin>
                  <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
               </VBox.margin>
            </TextField>
            <Pane prefHeight="10.0" style="-fx-background-color: black;" />
            <GridPane VBox.vgrow="ALWAYS">
               <columnConstraints>
                  <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                  <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                  <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
               </columnConstraints>
               <rowConstraints>
                  <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                  <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                  <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                  <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
               </rowConstraints>
               <children>
                  <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="1">
                     <GridPane.margin>
                        <Insets bottom="10.0" left="15.0" right="5.0" top="10.0" />
                     </GridPane.margin>
                  </Button>
                  <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="2" GridPane.columnIndex="1">
                     <GridPane.margin>
                        <Insets bottom="10.0" left="15.0" right="5.0" top="10.0" />
                     </GridPane.margin>
                  </Button>
                  <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="3" GridPane.columnIndex="2">
                     <GridPane.margin>
                        <Insets bottom="10.0" left="15.0" right="5.0" top="10.0" />
                     </GridPane.margin>
                  </Button>
                  <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="4" GridPane.rowIndex="1">
                     <GridPane.margin>
                        <Insets bottom="10.0" left="15.0" right="5.0" top="10.0" />
                     </GridPane.margin>
                  </Button>
                  <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="5" GridPane.columnIndex="1" GridPane.rowIndex="1">
                     <GridPane.margin>
                        <Insets bottom="10.0" left="15.0" right="5.0" top="10.0" />
                     </GridPane.margin>
                  </Button>
                  <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="6" GridPane.columnIndex="2" GridPane.rowIndex="1">
                     <GridPane.margin>
                        <Insets bottom="10.0" left="15.0" right="5.0" top="10.0" />
                     </GridPane.margin>
                  </Button>
                  <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="7" GridPane.rowIndex="2">
                     <GridPane.margin>
                        <Insets bottom="10.0" left="15.0" right="5.0" top="10.0" />
                     </GridPane.margin>
                  </Button>
                  <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="8" GridPane.columnIndex="1" GridPane.rowIndex="2">
                     <GridPane.margin>
                        <Insets bottom="10.0" left="15.0" right="5.0" top="10.0" />
                     </GridPane.margin>
                  </Button>
                  <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="9" GridPane.columnIndex="2" GridPane.rowIndex="2">
                     <GridPane.margin>
                        <Insets bottom="10.0" left="15.0" right="5.0" top="10.0" />
                     </GridPane.margin>
                  </Button>
                  <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="0" GridPane.rowIndex="3">
                     <GridPane.margin>
                        <Insets bottom="10.0" left="15.0" right="5.0" top="10.0" />
                     </GridPane.margin>
                  </Button>
                  <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Start" GridPane.columnIndex="1" GridPane.rowIndex="3">
                     <GridPane.margin>
                        <Insets bottom="10.0" left="15.0" right="5.0" top="10.0" />
                     </GridPane.margin>
                  </Button>
                  <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Stop" GridPane.columnIndex="2" GridPane.rowIndex="3">
                     <GridPane.margin>
                        <Insets bottom="10.0" left="15.0" right="5.0" top="10.0" />
                     </GridPane.margin>
                  </Button>
               </children>
            </GridPane>
         </children>
      </VBox>
   </children>
</HBox>