簡體   English   中英

JavaFx,FXML,如何自動調整內容大小:根據其父項的Button,StackPane,Field,Scrollpane

[英]JavaFx, FXML, how to auto resize content: Button, StackPane, Field, Scrollpane according to their parents

我正在嘗試使用Fxml(SceneBuilder)設計Java應用程序,我現在面臨的問題是,我無法自動調整內容的大小,根據GridPane(1,2)行的ScrollPane,根據GridPane行的StackPane 2以及Button和Textfield(根據窗格)。 是否有可以幫助我的財產或任何替代解決方案?

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.StackPane?>

<AnchorPane id="ClientItemMainAnchorPane" fx:id="ClientItem_anchorPane1" prefHeight="600.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <StackPane fx:id="ClientItem_stackPane1" prefHeight="600.0" prefWidth="800.0" AnchorPane.topAnchor="0.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
         <children>
            <GridPane fx:id="ClientItem_gridPane" >
              <columnConstraints>
                <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
              </columnConstraints>
              <rowConstraints>
                <RowConstraints maxHeight="517.0" minHeight="10.0" prefHeight="435.0" vgrow="SOMETIMES" />
                <RowConstraints maxHeight="294.0" minHeight="10.0" prefHeight="165.0" vgrow="SOMETIMES" />
              </rowConstraints>
               <children>
                  <ScrollPane fx:id="ClientItem_scrollPane" prefHeight="417.0" prefWidth="800.0">
                     <content>
                        <AnchorPane fx:id="ClientItem_AnchorPane2" prefHeight="396.0" prefWidth="736.0">
                           <children>
                              <TableView fx:id="ClientItem_tableView" layoutX="14.0" layoutY="14.0" prefHeight="382.0" prefWidth="768.0">
                                <columns>
                                  <TableColumn fx:id="ClientItem_tableCol_ClientNo" prefWidth="66.0" text="Client No." />
                                  <TableColumn fx:id="ClientItem_tableCol_Name" prefWidth="188.0" text="Name" />
                                    <TableColumn fx:id="ClientItem_tableCol_Address" minWidth="0.0" prefWidth="220.0" text="Address" />
                                    <TableColumn fx:id="ClientItem_tableCol_Phone" minWidth="0.0" prefWidth="108.0" text="Phone" />
                                    <TableColumn fx:id="ClientItem_tableCol_Remaing" minWidth="0.0" prefWidth="95.0" text="Remaining" />
                                    <TableColumn fx:id="ClientItem_tableCol_Type" prefWidth="87.0" text="Type" />
                                </columns>
                              </TableView>
                           </children>
                        </AnchorPane>
                     </content>
                  </ScrollPane>
                  <StackPane fx:id="ClientItem_StackPane2" prefHeight="150.0" prefWidth="200.0" GridPane.rowIndex="1">
                     <children>
                        <Pane fx:id="ClientItem_Pane" prefHeight="200.0" prefWidth="200.0">
                           <children>
                              <TextField fx:id="ClientItem_textField_ClientNo" layoutX="14.0" layoutY="42.0" prefHeight="25.0" prefWidth="69.0" />
                              <TextField fx:id="ClientItem_textField_Name" layoutX="80.0" layoutY="42.0" prefHeight="25.0" prefWidth="188.0" />
                              <TextField fx:id="ClientItem_textField_Remaining" layoutX="596.0" layoutY="42.0" prefHeight="25.0" prefWidth="95.0" />
                              <TextField fx:id="ClientItem_textField_Type" layoutX="691.0" layoutY="42.0" prefHeight="25.0" prefWidth="87.0" />
                              <TextField fx:id="ClientItem_textField_Address" layoutX="268.0" layoutY="42.0" prefHeight="25.0" prefWidth="220.0" />
                              <TextField fx:id="ClientItem_textField_Phone" layoutX="488.0" layoutY="42.0" prefHeight="25.0" prefWidth="108.0" />
                              <Label alignment="CENTER" layoutX="22.0" layoutY="14.0" text="Client No." />
                              <Label alignment="CENTER" contentDisplay="TOP" layoutX="158.0" layoutY="14.0" text="Name" />
                              <Label alignment="CENTER" layoutX="357.0" layoutY="14.0" text="Address" />
                              <Label alignment="CENTER" layoutX="525.0" layoutY="14.0" text="Phone" />
                              <Label alignment="CENTER" layoutX="615.0" layoutY="14.0" text="Remaining" />
                              <Label alignment="CENTER" layoutX="722.0" layoutY="14.0" text="Type" />
                              <Button fx:id="ClientItem_btn_Add" layoutX="307.0" layoutY="84.0" mnemonicParsing="false" prefHeight="50.0" prefWidth="100.0" text="Add" />
                              <Button fx:id="ClientItem_btn_Delete" layoutX="425.0" layoutY="84.0" mnemonicParsing="false" prefHeight="50.0" prefWidth="100.0" text="Delete" />
                           </children>
                        </Pane>
                     </children>
                  </StackPane>
               </children>
            </GridPane>
         </children>
      </StackPane>
   </children>
</AnchorPane>

在此處輸入圖片說明

我不確定您是否有意將內容包裝到多個窗格中,但這是不必要的。 如果您調用AnchorPane.setTopAnchor(Node)AnchorPane.setRightAnchor(Node)AnchorPane.setBottomAnchor(Node)AnchorPane.setLeftAnchor(Node) ,則窗格不會自動調整其內容的大小,並且AnchorPanes僅會調整內容的大小。

首先,GridPane。 您可以分別設置RowConstraintsColumnConstraints的VGrow和HGrow屬性,以根據GridPane的大小調整內容的大小。 設置RowConstraints和ColumnConstraints的percentHeight和percentWidth還將有助於使行和列保持其首選比例。

在ScrollPane上,設置fitToWidthfitToHeight屬性,以保持其子項的大小與ScrollPane的大小匹配。

對於輸入區域,HBox比Pane更適合,因此您可以更輕松地調整文本字段和按鈕的大小。 將每個Label的圖形設置為其對應的文本字段也將有助於將兩者保持在一起。

這是您整理過的fxml代碼,可為您提供更好的主意。

在此處輸入圖片說明

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


<?import javafx.geometry.Insets?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<GridPane fx:id="ClientItem_gridPane" prefHeight="600.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/8.0.65"
      xmlns:fx="http://javafx.com/fxml/1">
    <columnConstraints>
        <ColumnConstraints hgrow="ALWAYS" minWidth="10.0" prefWidth="100.0" />
    </columnConstraints>
    <rowConstraints>
        <RowConstraints maxHeight="1.7976931348623157E308" minHeight="10.0" percentHeight="73.0" prefHeight="435.0"
                    vgrow="ALWAYS" />
        <RowConstraints fillHeight="false" maxHeight="1.7976931348623157E308" minHeight="10.0" percentHeight="10.0"
                    prefHeight="65.0" />
        <RowConstraints fillHeight="false" maxHeight="1.7976931348623157E308" minHeight="10.0" percentHeight="17.0"
                    prefHeight="100.0" />
    </rowConstraints>
    <children>
        <ScrollPane fx:id="ClientItem_scrollPane" fitToHeight="true" fitToWidth="true" prefHeight="417.0"
                prefWidth="800.0" GridPane.halignment="CENTER" GridPane.hgrow="ALWAYS" GridPane.valignment="CENTER"
                GridPane.vgrow="ALWAYS">
            <content>
            <TableView fx:id="ClientItem_tableView" prefHeight="409.0" prefWidth="778.0">
                    <columns>
                        <TableColumn fx:id="ClientItem_tableCol_ClientNo" prefWidth="103.0" text="Client No." />
                        <TableColumn fx:id="ClientItem_tableCol_Name" prefWidth="151.0" text="Name" />
                        <TableColumn fx:id="ClientItem_tableCol_Address" minWidth="0.0" prefWidth="220.0"
                                 text="Address" />
                        <TableColumn fx:id="ClientItem_tableCol_Phone" minWidth="0.0" prefWidth="108.0" text="Phone" />
                        <TableColumn fx:id="ClientItem_tableCol_Remaing" minWidth="0.0" prefWidth="95.0"
                                 text="Remaining" />
                        <TableColumn fx:id="ClientItem_tableCol_Type" prefWidth="102.0" text="Type" />
                    </columns>
                </TableView>
            </content>
            <padding>
                <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
            </padding>
        </ScrollPane>
        <HBox alignment="CENTER" prefHeight="77.0" prefWidth="800.0" GridPane.hgrow="ALWAYS" GridPane.rowIndex="1"
          GridPane.vgrow="ALWAYS">
            <children>
                <Label alignment="CENTER" contentDisplay="BOTTOM" text="Client No.">
                    <graphic>
                        <TextField fx:id="ClientItem_textField_ClientNo" prefHeight="25.0" prefWidth="69.0" />
                    </graphic>
                </Label>
                <Label alignment="CENTER" contentDisplay="BOTTOM" text="Name">
                    <graphic>
                        <TextField fx:id="ClientItem_textField_Name" prefHeight="25.0" prefWidth="188.0" />
                    </graphic>
                </Label>
                <Label alignment="CENTER" contentDisplay="BOTTOM" text="Address">
                    <graphic>
                        <TextField fx:id="ClientItem_textField_Address" prefHeight="25.0" prefWidth="220.0" />
                    </graphic>
                </Label>
                <Label alignment="CENTER" contentDisplay="BOTTOM" text="Phone">
                    <graphic>
                        <TextField fx:id="ClientItem_textField_Phone" prefHeight="25.0" prefWidth="108.0" />
                    </graphic>
                </Label>
                <Label alignment="CENTER" contentDisplay="BOTTOM" text="Remaining">
                    <graphic>
                        <TextField fx:id="ClientItem_textField_Remaining" prefHeight="25.0" prefWidth="95.0" />
                    </graphic>
                </Label>
                <Label alignment="CENTER" contentDisplay="BOTTOM" text="Type">
                    <graphic>
                        <TextField fx:id="ClientItem_textField_Type" prefHeight="25.0" prefWidth="87.0" />
                    </graphic>
                </Label>
            </children>
            <padding>
                <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
            </padding>
        </HBox>
        <HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0" spacing="20.0" GridPane.hgrow="ALWAYS"
          GridPane.rowIndex="2" GridPane.vgrow="ALWAYS">
            <children>
                <Button fx:id="ClientItem_btn_Add" mnemonicParsing="false" prefHeight="50.0" prefWidth="100.0"
                    text="Add" />
                <Button fx:id="ClientItem_btn_Delete" mnemonicParsing="false" prefHeight="50.0" prefWidth="100.0"
                    text="Delete" />
            </children>
            <padding>
                <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
            </padding>
        </HBox>
    </children>
</GridPane>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM