java - SceneBuilder 中的 GridPane 调整

Question

目前，我正在尝试为我的 Zoo 数据库应用程序制作一个 GUI，但我不知道如何设置我的 GridPane 使其完全按照我希望的方式工作。我的问题是，我想保持左侧始终相同的大小，并且只有 TableView 并过滤表格下方的 textField 来调整大小。

在下面的屏幕上，您可以看到它从一开始就应该是什么样子。另外，我不知道如何将狮子 imageView 居中，就像我将上面的所有 buttons 和 textFields 居中一样。

任何提示都会很棒，谢谢! :)

Answer 1

StackPanes 非常擅长将事物居中。另外，如果您在 SplitPane 中设置根 AnchorPane 的 minWidth、maxWidth 和 PreferredWidth。那一侧无法再与场景的其他部分一起成长。

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

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.SplitPane?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>

<AnchorPane id="AnchorPane" prefHeight="546.0" prefWidth="732.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.111" fx:controller="javafxapplication109.FXMLDocumentController">
    <children>
        <Label fx:id="label" layoutX="126" layoutY="120" minHeight="16" minWidth="69" />
      <SplitPane dividerPositions="0.3078078078078078" layoutX="26.0" layoutY="120.0" prefHeight="160.0" prefWidth="200.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
        <items>
          <AnchorPane maxWidth="200.0" minHeight="0.0" minWidth="200.0" prefHeight="160.0" prefWidth="200.0">
               <children>
                  <VBox layoutX="29.0" layoutY="26.0" prefHeight="200.0" prefWidth="100.0" AnchorPane.bottomAnchor="10.0" AnchorPane.leftAnchor="10.0" AnchorPane.rightAnchor="10.0" AnchorPane.topAnchor="50.0">
                     <children>
                        <Label text="Name" />
                        <TextField />
                        <Label text="Specie" />
                        <TextField />
                        <Label text="Age" />
                        <TextField />
                        <Label text="Cage" />
                        <TextField />
                        <Button maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Add">
                           <VBox.margin>
                              <Insets top="10.0" />
                           </VBox.margin>
                        </Button>
                        <StackPane prefHeight="180.0" VBox.vgrow="ALWAYS">
                           <VBox.margin>
                              <Insets top="20.0" />
                           </VBox.margin>
                           <children>
                              <ImageView fitHeight="150.0" fitWidth="180.0" pickOnBounds="true" preserveRatio="true">
                                 <image>
                                    <Image url="@../img/java2.jpg" />
                                 </image>
                              </ImageView>
                           </children>
                        </StackPane>
                        <StackPane maxWidth="1.7976931348623157E308">
                           <children>
                              <Label text="ZOO APPLICATION">
                                 <font>
                                    <Font name="System Bold" size="12.0" />
                                 </font>
                              </Label>
                           </children>
                        </StackPane>
                     </children>
                  </VBox>
               </children>
            </AnchorPane>
          <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="544.0" prefWidth="520.0">
               <children>
                  <TableView layoutX="65.0" layoutY="80.0" prefHeight="200.0" prefWidth="200.0" AnchorPane.bottomAnchor="10.0" AnchorPane.leftAnchor="10.0" AnchorPane.rightAnchor="10.0" AnchorPane.topAnchor="10.0">
                    <columns>
                      <TableColumn prefWidth="45.0" text="ID" />
                      <TableColumn prefWidth="105.0" text="Name" />
                        <TableColumn prefWidth="108.33334350585938" text="Specie" />
                        <TableColumn prefWidth="41.666656494140625" text="Age" />
                        <TableColumn prefWidth="75.0" text="Cage" />
                        <TableColumn prefWidth="124.33331298828125" text="Action" />
                    </columns>
                  </TableView>
               </children>
            </AnchorPane>
        </items>
      </SplitPane>
    </children>
</AnchorPane>

Normal screen size:

Fullscreen size:

You can make the adjustments for your TableColumns.