SceneBuilder看起来与JavaFX程序不同吗？

Question

When I edit on SceneBuilder, the program looks like this

When I run the program, it looks like this:

This is my first time trying to use FXML and I have no idea what is going wrong. I tried to follow this question but don't see a solution..

Here is my FXML code:

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

<GridPane alignment="center" hgap="10" prefHeight="633.0" prefWidth="869.0" stylesheets="/sample/sample.css" vgap="10" xmlns="http://javafx.com/javafx/8.0.76-ea" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
   <columnConstraints>
      <ColumnConstraints />
   </columnConstraints>
   <rowConstraints>
      <RowConstraints />
   </rowConstraints>
   <children>
      <BorderPane prefHeight="662.0" prefWidth="869.0" stylesheets="@sample.css">
         <top>
            <ImageView fitHeight="173.0" fitWidth="409.0" pickOnBounds="true" preserveRatio="true" BorderPane.alignment="CENTER">
               <image>
                  <Image url="@../../../../../Pictures/title.png" />
               </image>
            </ImageView>
         </top>
         <right>
            <VBox prefHeight="305.0" prefWidth="105.0" BorderPane.alignment="CENTER">
               <children>
                  <Button mnemonicParsing="false" text="Make a Graph" />
                  <Button mnemonicParsing="false" text="Save" />
                  <Button mnemonicParsing="false" text="Delete" />
               </children></VBox>
         </right>
         <center>
            <VBox prefHeight="200.0" prefWidth="100.0" BorderPane.alignment="CENTER">
               <children>
                  <Pane prefHeight="41.0" prefWidth="764.0">
                     <children>
                        <BorderPane prefHeight="0.0" prefWidth="764.0">
                           <left>
                              <ComboBox prefWidth="150.0" promptText="Sort or Filter" BorderPane.alignment="CENTER" />
                           </left>
                           <right>
                              <TextField text="Search" BorderPane.alignment="CENTER" />
                           </right>
                           <center>
                              <StackPane prefHeight="150.0" prefWidth="200.0" BorderPane.alignment="CENTER">
                                 <children>
                                    <HBox disable="true" prefHeight="100.0" prefWidth="200.0">
                                       <children>
                                          <ComboBox prefWidth="150.0" />
                                          <CheckBox mnemonicParsing="false" prefHeight="33.0" prefWidth="120.0" text="Favourties" />
                                       </children>
                                    </HBox>
                                 </children>
                              </StackPane>
                           </center>
                        </BorderPane>
                     </children></Pane>
                  <ScrollPane prefHeight="507.0" prefWidth="764.0">
                     <content>
                        <GridPane prefHeight="90.0" prefWidth="762.0">
                          <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 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>
                           <children>
                              <Label prefHeight="21.0" prefWidth="61.0" text="Graph" />
                              <Label text="Description" GridPane.columnIndex="1" />
                              <Label text="Options" GridPane.columnIndex="2" />
                              <Label text="Favourites" GridPane.columnIndex="3" />
                           </children>
                        </GridPane>
                     </content>
                  </ScrollPane>
               </children>
            </VBox>
         </center></BorderPane>
   </children>
</GridPane>

Here is my Java code:

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception{
        Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
        primaryStage.setTitle("Hello World");
        primaryStage.setScene(new Scene(root, 600, 400));
        primaryStage.show();
    }


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

Sorry for the huge chunks of code. Just not sure where the problem is coming from.

Answer 1

You just seem to throw together some layouts that make the UI look the right way in SceneBuilder.

This approach is bad. This way you can be almost sure the layout will be messed up when it's resized. If a Stage is resized this forces the content of the Scene to a appropriate size depending on the Stage size.

You can observe the behaviour in SceneBuilder too, if you wrap the root node in a AnchorPane , set all anchors for the original root to 0 and resize the AnchorPane .

You should learn, what the layouts do and then design the UI in SceneBuilder. In general it's best to keep the scene simple instead of nesting more layouts than necessary.
In your case 3 Pane s seem to suffice:

1. A GridPane as root
2. A VBox containing the Button s
3. The GridPane inside the ScrollPane

By using the GridPane 's layout parameters you can design a UI that has a much nicer resizing behavior:

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

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.image.*?>

<GridPane alignment="center" hgap="10" prefHeight="633.0" prefWidth="869.0" stylesheets="/sample/sample.css" vgap="10" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
    <children>
        <ImageView fitHeight="173.0" fitWidth="409.0" pickOnBounds="true" preserveRatio="true" GridPane.halignment="CENTER" GridPane.columnSpan="5" >
            <image>
                <Image url="@../../../../../Pictures/title.png" />
            </image>
        </ImageView>
        <VBox prefWidth="105.0" GridPane.columnIndex="4" GridPane.rowIndex="1" GridPane.rowSpan="2" >
            <children>
                <Button mnemonicParsing="false" text="Make a Graph" />
                <Button mnemonicParsing="false" text="Save" />
                <Button mnemonicParsing="false" text="Delete" />
            </children>
        </VBox>
        <ComboBox prefWidth="150.0" promptText="Sort or Filter" GridPane.rowIndex="1" />
        <ComboBox prefWidth="150.0" GridPane.rowIndex="1" GridPane.columnIndex="1" disable="true"/>
        <CheckBox mnemonicParsing="false" prefHeight="33.0" prefWidth="120.0" text="Favourties" GridPane.rowIndex="1" GridPane.columnIndex="2" disable="true"/>
        <TextField text="Search" GridPane.rowIndex="1" GridPane.columnIndex="3"/>
        <ScrollPane prefHeight="507.0" prefWidth="764.0" GridPane.rowIndex="2" GridPane.columnSpan="4">
            <content>
                <GridPane prefHeight="90.0" prefWidth="762.0">
                    <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 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>
                    <children>
                        <Label prefHeight="21.0" prefWidth="61.0" text="Graph" />
                        <Label text="Description" GridPane.columnIndex="1" />
                        <Label text="Options" GridPane.columnIndex="2" />
                        <Label text="Favourites" GridPane.columnIndex="3" />
                    </children>
                </GridPane>
            </content>
        </ScrollPane>
    </children>
</GridPane>

Answer 2

In your case, Size of Scene is less than size of GridPane

 primaryStage.setScene(new Scene(root, 600, 400));

and in grid pane size is

 <GridPane alignment="center" hgap="10" prefHeight="633.0" prefWidth="869.0"

because of this there is difference in layout :)