我一直在尝试制作一个简单的 UI，其中顶部部分有一个菜单栏，BorderLayout 的中心部分有 4 个表格 View 。我想要的是这 4 个表应该显示为 2by2 矩阵。我的意思是 2 行和 2 列，然后这些表格应该根据屏幕尺寸或当我调整框架大小时增大和缩小。
表格 View 以及高度的增长和收缩都很好。但我无法调整宽度。我想要的是，我想要表格的响应式设计。当我调整框架大小时，表格的高度和宽度应该增大和缩小。高度部分工作正常，但我无法实现宽度的此功能。
这是我的 FXML 代码
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<BorderPane xmlns="http://javafx.com/javafx/20.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.ui_designs.HelloController">
<top>
<MenuBar BorderPane.alignment="CENTER">
<menus>
<Menu mnemonicParsing="false" text="Bills">
<items>
<MenuItem mnemonicParsing="false" text="Walk In Bill" />
<MenuItem mnemonicParsing="false" text="Account Holder Bill" />
</items>
</Menu>
<Menu mnemonicParsing="false" text="Stock">
<items>
<MenuItem mnemonicParsing="false" text="Add New Product" />
<MenuItem mnemonicParsing="false" text="Purchase Request" />
<MenuItem mnemonicParsing="false" text="Stock Arrival" />
<MenuItem mnemonicParsing="false" text="Stcok Exchange" />
</items>
</Menu>
<Menu mnemonicParsing="false" text="Accounts">
<items>
<MenuItem mnemonicParsing="false" text="Add Account Holder" />
<MenuItem mnemonicParsing="false" text="Account Holder's Transactions" />
<MenuItem mnemonicParsing="false" text="Company Accounts" />
<MenuItem mnemonicParsing="false" text="Company Transactions" />
</items>
</Menu>
<Menu mnemonicParsing="false" text="Reports">
<items>
<MenuItem mnemonicParsing="false" text="Daily Report" />
</items>
</Menu>
<Menu mnemonicParsing="false" text="About">
<items>
<MenuItem mnemonicParsing="false" text="About" />
</items>
</Menu>
</menus>
</MenuBar>
</top>
<center>
<VBox alignment="CENTER" spacing="10.0" BorderPane.alignment="CENTER">
<HBox spacing="10.0">
<!-- First VBox with TableView -->
<VBox spacing="10.0">
<children>
<Label text="Table 1 Heading" />
<TableView>
<columns>
<TableColumn text="Column 1" />
<TableColumn text="Column 2" />
</columns>
</TableView>
</children>
</VBox>
<!-- Second VBox with TableView -->
<VBox spacing="10.0">
<children>
<Label text="Table 2 Heading" />
<TableView>
<columns>
<TableColumn text="Column 1" />
<TableColumn text="Column 2" />
</columns>
</TableView>
</children>
</VBox>
</HBox>
<HBox spacing="10.0">
<children>
<VBox spacing="10.0">
<children>
<Label text="Table 1 Heading" />
<TableView>
<columns>
<TableColumn text="Column 1" />
<TableColumn text="Column 2" />
</columns>
</TableView>
</children>
</VBox>
<VBox spacing="10.0">
<children>
<Label text="Table 2 Heading" />
<TableView>
<columns>
<TableColumn text="Column 1" />
<TableColumn text="Column 2" />
</columns>
</TableView>
</children>
</VBox>
</children>
</HBox>
</VBox>
</center>
</BorderPane>
最佳答案
添加fillWidth="true"到所有 VBox 实例，以及 HBox.hgrow="ALWAYS"到四个“内部”VBox 实例:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<BorderPane xmlns="http://javafx.com/javafx/20.0.1" xmlns:fx="http://javafx.com/fxml/1" >
<top>
<MenuBar BorderPane.alignment="CENTER">
<menus>
<Menu mnemonicParsing="false" text="Bills">
<items>
<MenuItem mnemonicParsing="false" text="Walk In Bill" />
<MenuItem mnemonicParsing="false" text="Account Holder Bill" />
</items>
</Menu>
<Menu mnemonicParsing="false" text="Stock">
<items>
<MenuItem mnemonicParsing="false" text="Add New Product" />
<MenuItem mnemonicParsing="false" text="Purchase Request" />
<MenuItem mnemonicParsing="false" text="Stock Arrival" />
<MenuItem mnemonicParsing="false" text="Stcok Exchange" />
</items>
</Menu>
<Menu mnemonicParsing="false" text="Accounts">
<items>
<MenuItem mnemonicParsing="false" text="Add Account Holder" />
<MenuItem mnemonicParsing="false" text="Account Holder's Transactions" />
<MenuItem mnemonicParsing="false" text="Company Accounts" />
<MenuItem mnemonicParsing="false" text="Company Transactions" />
</items>
</Menu>
<Menu mnemonicParsing="false" text="Reports">
<items>
<MenuItem mnemonicParsing="false" text="Daily Report" />
</items>
</Menu>
<Menu mnemonicParsing="false" text="About">
<items>
<MenuItem mnemonicParsing="false" text="About" />
</items>
</Menu>
</menus>
</MenuBar>
</top>
<center>
<VBox alignment="CENTER" spacing="10.0" BorderPane.alignment="CENTER" fillWidth="true">
<HBox spacing="10.0">
<!-- First VBox with TableView -->
<VBox spacing="10.0" fillWidth="true" HBox.hgrow="ALWAYS">
<children>
<Label text="Table 1 Heading" />
<TableView>
<columns>
<TableColumn text="Column 1" />
<TableColumn text="Column 2" />
</columns>
</TableView>
</children>
</VBox>
<!-- Second VBox with TableView -->
<VBox spacing="10.0" fillWidth="true" HBox.hgrow="ALWAYS">
<children>
<Label text="Table 2 Heading" />
<TableView>
<columns>
<TableColumn text="Column 1" />
<TableColumn text="Column 2" />
</columns>
</TableView>
</children>
</VBox>
</HBox>
<HBox spacing="10.0">
<children>
<VBox spacing="10.0" fillWidth="true" HBox.hgrow="ALWAYS">
<children>
<Label text="Table 1 Heading" />
<TableView>
<columns>
<TableColumn text="Column 1" />
<TableColumn text="Column 2" />
</columns>
</TableView>
</children>
</VBox>
<VBox spacing="10.0" fillWidth="true" HBox.hgrow="ALWAYS">
<children>
<Label text="Table 2 Heading" />
<TableView>
<columns>
<TableColumn text="Column 1" />
<TableColumn text="Column 2" />
</columns>
</TableView>
</children>
</VBox>
</children>
</HBox>
</VBox>
</center>
</BorderPane>
通常 GridPane 比嵌套 HBox 和 VBox 实例更容易:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.RowConstraints?>
<BorderPane xmlns="http://javafx.com/javafx/20.0.1" xmlns:fx="http://javafx.com/fxml/1" >
<top>
<MenuBar BorderPane.alignment="CENTER">
<menus>
<Menu mnemonicParsing="false" text="Bills">
<items>
<MenuItem mnemonicParsing="false" text="Walk In Bill" />
<MenuItem mnemonicParsing="false" text="Account Holder Bill" />
</items>
</Menu>
<Menu mnemonicParsing="false" text="Stock">
<items>
<MenuItem mnemonicParsing="false" text="Add New Product" />
<MenuItem mnemonicParsing="false" text="Purchase Request" />
<MenuItem mnemonicParsing="false" text="Stock Arrival" />
<MenuItem mnemonicParsing="false" text="Stcok Exchange" />
</items>
</Menu>
<Menu mnemonicParsing="false" text="Accounts">
<items>
<MenuItem mnemonicParsing="false" text="Add Account Holder" />
<MenuItem mnemonicParsing="false" text="Account Holder's Transactions" />
<MenuItem mnemonicParsing="false" text="Company Accounts" />
<MenuItem mnemonicParsing="false" text="Company Transactions" />
</items>
</Menu>
<Menu mnemonicParsing="false" text="Reports">
<items>
<MenuItem mnemonicParsing="false" text="Daily Report" />
</items>
</Menu>
<Menu mnemonicParsing="false" text="About">
<items>
<MenuItem mnemonicParsing="false" text="About" />
</items>
</Menu>
</menus>
</MenuBar>
</top>
<center>
<GridPane alignment="CENTER" hgap="10.0" vgap="10" BorderPane.alignment="CENTER">
<columnConstraints>
<ColumnConstraints fillWidth="true" hgrow="ALWAYS"/>
<ColumnConstraints fillWidth="true" hgrow="ALWAYS"/>
</columnConstraints>
<rowConstraints>
<RowConstraints/>
<RowConstraints fillHeight="true" vgrow="ALWAYS"/>
<RowConstraints/>
<RowConstraints fillHeight="true" vgrow="ALWAYS"/>
</rowConstraints>
<children>
<Label text="Table 1 Heading" GridPane.columnIndex="0" GridPane.rowIndex="0" />
<TableView GridPane.columnIndex="0" GridPane.rowIndex="1">
<columns>
<TableColumn text="Column 1" />
<TableColumn text="Column 2" />
</columns>
</TableView>
<Label text="Table 2 Heading" GridPane.columnIndex="1" GridPane.rowIndex="0"/>
<TableView GridPane.columnIndex="1" GridPane.rowIndex="1">
<columns>
<TableColumn text="Column 1" />
<TableColumn text="Column 2" />
</columns>
</TableView>
<Label text="Table 1 Heading" GridPane.columnIndex="0" GridPane.rowIndex="2"/>
<TableView GridPane.columnIndex="0" GridPane.rowIndex="3">
<columns>
<TableColumn text="Column 1" />
<TableColumn text="Column 2" />
</columns>
</TableView>
<Label text="Table 2 Heading" GridPane.columnIndex="1" GridPane.rowIndex="2"/>
<TableView GridPane.columnIndex="1" GridPane.rowIndex="3">
<columns>
<TableColumn text="Column 1" />
<TableColumn text="Column 2" />
</columns>
</TableView>
</children>
</GridPane>
</center>
</BorderPane>
关于java - 如何使 JavaFx 中的 TableView 响应式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/77002280/