如何在javafx中进行响应式设计

Question

我正在 javaFx 中构建一个应用程序，但问题是我的应用程序没有调整大小，如果我打开该应用程序，小窗口很好，但是当我最大化窗口时，应用程序内容（表）不会相应地调整大小。这是我的 fxml 文件。

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

<?import java.lang.String?>
<?import javafx.collections.FXCollections?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ComboBox?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ch.Buildsapp.Main.BuildsController">
    <children>
        <ComboBox fx:id="versionCombo" layoutX="6.0" layoutY="14.0" prefWidth="150.0" promptText="7.0 Win">
          <items>
        <FXCollections fx:factory="observableArrayList">
          <String fx:value="Win" />
          <String fx:value="Mac" />
          </FXCollections>
      </items>
            <value>
        <String fx:value="Win" />
    </value>
        </ComboBox>
        <TableView fx:id="tableView" layoutX="6.0" layoutY="52.0">
            <columns>
                <TableColumn fx:id="builds" prefWidth="482.0" text="Builds" />
                <TableColumn fx:id="date" minWidth="0.0" prefWidth="124.0" text="Date" />
                <TableColumn fx:id="release" prefWidth="167.0" text="Release" />
            </columns>
        </TableView>
        <Button fx:id="downloadButton" layoutX="328.0" layoutY="14.0" mnemonicParsing="false" text="Download" />
        <Button fx:id="installButton" layoutX="458.0" layoutY="14.0" mnemonicParsing="false" text="Install" />
      <ComboBox fx:id="locCombo" layoutX="636.0" layoutY="14.0" prefWidth="150.0">
      <items>
        <FXCollections fx:factory="observableArrayList">
          <String fx:value="CJ" />
          <String fx:value="MN" />
          </FXCollections>
      </items>
      <value>
        <String fx:value="CJ" />
    </value>
      </ComboBox>
      <ComboBox fx:id="versionNo" layoutX="177.0" layoutY="14.0" prefHeight="31.0" prefWidth="122.0" promptText="7.0" />

    </children>
</AnchorPane>

这是绑定代码。

public void initRootLayout() {
    try {
        // Load root layout from fxml file.
        FXMLLoader loader = new FXMLLoader();
        loader.setLocation(MainApp.class.getResource("BuildsView.fxml"));
        rootLayout = (AnchorPane) loader.load();

        Scene scene = new Scene(rootLayout);
        rootLayout.sceneProperty().addListener(new ChangeListener<Scene>() {
                @Override
                public void changed(ObservableValue<? extends Scene> observable,
                        Scene oldValue, Scene newValue) {
                    rootLayout.prefWidthProperty().bind(newValue.widthProperty());
                    rootLayout.prefHeightProperty().bind(newValue.heightProperty());
                }
            });
        primaryStage.setScene(scene);
        primaryStage.show();
    } catch (IOException e) {
        e.printStackTrace();
    }
}

Answer 1

第二次编辑

最初的解决方案在没有注意到的情况下进行了修复。

你的问题是因为你没有真正指定你TableView应该如何在你的AnchorPane. 默认情况下，儿童在AnchorPane左上角布置Width，height如果可以的话，他们可以根据自己的情况来变宽和变长。

这就是为什么你Tableview没有按照你想要的方式做出很多反应

<TableView fx:id="tableView" layoutX="6.0" layoutY="52.0">//setLayout should not be use here

如您所见，您没有为 TableView 指定约束，因此它们遵循默认值

但是在我的解决方案中，由于我没有复制粘贴您的内容，fxml而是尝试亲自将其布局，我并没有真正注意到您的错误并坚持使用我未经测试的离线解决方案，bind但真正的解决方案是

<TableView fx:id="tableView" AnchorPane.bottomAnchor="0.0" 
       AnchorPane.leftAnchor="2.0" AnchorPane.rightAnchor="2.0" AnchorPane.topAnchor="40.0">

正如您所看到的，它们有限制，并且与您的有很大不同，而我的旧编辑就有。

很抱歉我发布了 6 个月的 bs。

第一次编辑

抱歉耽搁了。但像这样的事情。

仅供参考：我删除了控制器 ID。所以比较并做出调整

 import javafx.application.Application;
 import javafx.beans.value.ChangeListener;
 import javafx.beans.value.ObservableValue;
 import javafx.fxml.FXMLLoader;
 import javafx.scene.Scene;
 import javafx.scene.layout.AnchorPane;
 import javafx.stage.Stage;


 public class Main extends Application {
 @Override
 public void start(Stage primaryStage) {
    try {
        FXMLLoader loader = new FXMLLoader();
        loader.setLocation(Main.class.getResource("pane.fxml"));
        AnchorPane rootLayout = loader.load();

        Scene scene = new Scene(rootLayout);
        //rootLayout.prefWidthProperty().bind(scene.widthProperty()); not needed
        //rootLayout.prefHeightProperty().bind(scene.heightProperty());in these scenario
        primaryStage.setScene(scene);
        primaryStage.show();
    } catch(Exception e) {
        e.printStackTrace();
    }
}

public static void main(String[] args) {

    launch(args);
}
}

然后是 fxml，我叫我的 pane

<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.String?>
<?import javafx.collections.FXCollections?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ComboBox?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
  <AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1">
<children>
  <HBox alignment="CENTER_LEFT" layoutX="6.0" layoutY="14.0" spacing="20.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
     <children>
          <ComboBox fx:id="versionCombo" prefWidth="150.0" promptText="7.0 Win">
            <items>
          <FXCollections fx:factory="observableArrayList">
            <String fx:value="Win" />
            <String fx:value="Mac" />
            </FXCollections>
        </items>
              <value>
          <String fx:value="Win" />
      </value>
          </ComboBox>
        <ComboBox fx:id="versionNo" prefHeight="31.0" prefWidth="122.0" promptText="7.0" />
          <Button fx:id="downloadButton" minWidth="80.0" mnemonicParsing="false" text="Download" />
          <Button fx:id="installButton" minWidth="80.0" mnemonicParsing="false" text="Install" />
        <ComboBox fx:id="locCombo" prefWidth="150.0">
        <items>
          <FXCollections fx:factory="observableArrayList">
            <String fx:value="CJ" />
            <String fx:value="MN" />
            </FXCollections>
        </items>
        <value>
          <String fx:value="CJ" />
      </value>
        </ComboBox>
     </children>
     <padding>
        <Insets left="10.0" right="3.0" top="5.0" />
     </padding>
  </HBox>
    <TableView fx:id="tableView" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="2.0" AnchorPane.rightAnchor="2.0" AnchorPane.topAnchor="40.0">
        <columns>
            <TableColumn fx:id="builds" prefWidth="482.0" text="Builds" />
            <TableColumn fx:id="date" minWidth="0.0" prefWidth="124.0" text="Date" />
            <TableColumn fx:id="release" prefWidth="167.0" text="Release" />
        </columns>
    </TableView>

 </children>
</AnchorPane>