java 如何在javafx中进行响应式设计
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35936072/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make responsive design in javafx
提问by user3649361
I am building an app in javaFx but the problem is my app doesn't resize, if I open the app the small window is which is fine but when I maximize the window the app content(table) doesn't resize accordingly. here is my fxml file.
我正在 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>
here is code for binding.
这是绑定代码。
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();
}
}
采纳答案by Elltz
2nd Edit
第二次编辑
Initial solution had the fix without noting.
最初的解决方案在没有注意到的情况下进行了修复。
Your problem was because you had not really specified how your TableViewshould be layed out in your AnchorPane. By default children in AnchorPaneare layed out Top-Left and they are left to grow wide and long based on their Widthand heightif they can.
你的问题是因为你没有真正指定你TableView应该如何在你的AnchorPane. 默认情况下，孩子们在AnchorPane左上角布置Width，height如果可以的话，他们可以根据自己的情况变宽和变长。
That is why your Tableviewwas not very much responding the way you wanted it
这就是为什么你Tableview没有按照你想要的方式做出很多反应
<TableView fx:id="tableView" layoutX="6.0" layoutY="52.0">//setLayout should not be use here
as you can see you did not specify constraint for your TableView hence they followed the default
如您所见，您没有为 TableView 指定约束，因此它们遵循默认值
however in my solution since I did not copy paste your fxmlbut tried to lay it out personally i did not really noticed your error and stuck to my untested-offheadsolution which was bindbut the real solution is
但是在我的解决方案中，因为我没有复制粘贴您的fxml但试图亲自布置它我并没有真正注意到您的错误并坚持使用我未经测试的离线解决方案，bind但真正的解决方案是
<TableView fx:id="tableView" AnchorPane.bottomAnchor="0.0"
AnchorPane.leftAnchor="2.0" AnchorPane.rightAnchor="2.0" AnchorPane.topAnchor="40.0">
as you can see they have constraints and very much different from yours, and my old edit had that.
正如您所看到的，它们有限制，并且与您的有很大不同，而我的旧编辑就有。
so sorry for the 6months bs i posted.
很抱歉我发布了 6 个月的 bs。
1st EDIT
第一次编辑
sorry for the delay. but something like this.
抱歉耽搁了。但像这样的事情。
fyi: i removed the controller id. so compare and make your adjustment
仅供参考：我删除了控制器 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);
}
}
THen the fxml, i called mine pane
然后是 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>
回答by cz game
Just add this:
只需添加这个：
<TableView fx:id="tableView" layoutX="6.0" layoutY="52.0"
AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
