如何使JavaFx中的表格视图响应式？

问题描述 投票：0回答：1

我一直在尝试制作一个简单的 UI，其中顶部部分有一个菜单栏，BorderLayout 的中心部分有 4 个表格视图。我想要的是这 4 个表应该显示为 2by2 矩阵。我的意思是 2 行和 2 列，然后这些表格应该根据屏幕尺寸或当我调整框架大小时增大和缩小。

桌子的视野和高度的增长和缩小都很好。但我无法调整宽度。我想要的是，我想要表格的响应式设计。当我调整框架大小时，表格的高度和宽度应该增大和缩小。高度部分工作正常，但我无法实现宽度的此功能。

这是我的 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>
java javafx responsive-design fxml
1个回答
0
投票

将 

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>
                <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>

        </GridPane>
    </center>
</BorderPane>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.