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

Question

当我SceneBuilder编辑，程序看起来像这样

当我运行程序时，它看起来像这样：

这是我第一次尝试使用FXML，我不知道是什么出错了。我试图按照this的问题，但没有看到一个解决方案..

这里是我的FXML代码：

<?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> 

这里是我的Java代码：

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); 
    } 
} 

对不起，大块的代码。只是不确定问题来自哪里。

Answer 1

您似乎将一些布局放在一起，使UI在SceneBuilder中看起来很正确。

这种方法很糟糕。通过这种方式，您几乎可以确定布局在调整大小时会发生混乱。如果调整了Stage的大小，则会根据Stage的大小强制将Scene的内容调整为合适的大小。

可以观察SceneBuilder行为也一样，如果你包裹在AnchorPane根节点，设置root的原所有锚0和调整AnchorPane。

您应该了解，布局是什么，然后然后在SceneBuilder中设计UI。一般情况下，最好保持场景简单，而不是嵌套更多的布局。
在你的情况3个Pane小号似乎足够了：

1. 甲GridPane作为根
2. 甲VBox含有Button小号
3. 的ScrollPane

内的GridPane通过使用GridPane'您可以设计一个具有更好的调整行为的UI：

<?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

在你的情况，现场的尺寸小于GridPane

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

，并在网格窗格的大小尺寸是

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

因为这存在差异布局:)