java - SceneBuilder 看起来与 JavaFX 程序不同?

标签 java user-interface javafx fxml

当我在 SceneBuilder 上编辑时,程序看起来像这样 enter image description here

当我运行该程序时,它看起来像这样: enter image description here

这是我第一次尝试使用 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);
    }
}

对于大量的代码,我们深表歉意。只是不确定问题出在哪里。

最佳答案

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

这种方法很糟糕。这样,您几乎可以确定调整大小时布局会变得困惑。如果调整Stage的大小,则会根据Stage的大小强制将Scene的内容调整为适当的大小。

您也可以在 SceneBuilder 中观察行为,如果将根节点包装在 AnchorPane 中,将原始根的所有 anchor 设置为 0 并调整 的大小> anchor Pane

您应该了解布局的作用,然后在 SceneBuilder 中设计 UI。一般来说,最好保持场景简单,而不是嵌套不必要的布局。
在您的情况下,3 Pane 似乎就足够了:

  1. 作为 root 的GridPane
  2. 包含 ButtonVBox
  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>

关于java - SceneBuilder 看起来与 JavaFX 程序不同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39847437/

相关文章:

python - PyQt5 : widget not displayed after being added to layout

单独线程上的 C# UI

java - JEdi​​torPane 组件文本对齐和背景

javafx - 为什么我的 Spinner 在第一次初始化时不更新它的绑定(bind)属性?

c# - 使用 webbrowser 从 C# 向套接字发送命令

java - 如何使用 selenium 处理 Phptravels.net 网站上的下拉菜单

java - 如何将数据从一个 Activity 传递到当前可见/Activity Activity ?这是一个很好的共同模式吗?

java - 关于 String.replaceAll() 和 String.replaceFirst() 方法的问题

Javafx如何跨行?

JavaFX - 添加一个 ScrollPane 弹出窗口,当用户点击它时关闭