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

Question

我正在用 javaFx 构建一个应用程序，但问题是我的应用程序没有调整大小，如果我打开应用程序，小的 window 很好，但是当我最大化 window 时应用程序内容 (table) 不会相应地调整大小。这是我的 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 中的 children 布局为 Top-Left，如果可以的话，它们会根据 Width 和 height 变宽和变长。

这就是为什么您的 Tableview 没有按照您想要的方式做出很好的响应

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

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

但是在我的解决方案中，因为我没有复制粘贴你的 fxml 而是试图亲自布置它，我没有真正注意到你的错误并坚持我的 untested-offhead 的解决方案是 bind 但真正的解决方案是

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

如您所见，它们有限制并且与您的有很大不同，而我的旧编辑有这些限制。

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

第一次编辑

抱歉耽搁了。但是像这样。

仅供参考：我删除了控制器 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>

Answer 2

只需添加：

 <TableView fx:id="tableView" layoutX="6.0" layoutY="52.0" 
AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">

Answer 3

您必须将所有约束设置为 0。检查一下

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

How to make responsive design in javafx

java

javafx

javafx-2