如何在 JavaFX 中交换父节点的子节点？

Question

我想将 Button 与 TextField 交换。怎么做？

听说有 toFront() 和 toBack() 方法。但是子节点必须包装在一个组中。这是真的吗？

还有其他方法吗？

<ToolBar fx:id="toolbarForActivityPanel" layoutX="22.0" layoutY="316.0" prefHeight="0.0" prefWidth="518.0" style="-fx-background-color: black;" AnchorPane.bottomAnchor="21.0" AnchorPane.leftAnchor="21.0" AnchorPane.rightAnchor="21.0">
                      <items>
                        <Button fx:id="createOfActivityButton" contentDisplay="CENTER" mnemonicParsing="false" prefHeight="46.0" prefWidth="48.0" style="-fx-background-color: black; -fx-border-color: white; -fx-border-insets: 0px 10px 0px 0px;">
                             <graphic>
                                <ImageView fitHeight="30.0" fitWidth="32.0" pickOnBounds="true" preserveRatio="true" style="-fx-background-color: black; -fx-border-radius: 4px;">
                                   <image>
                                      <Image url="@../../img/icons_of_activities/icons8-plus-math-48.png" />
                                   </image>
                                </ImageView>
                             </graphic>
                             <cursor>
                                <Cursor fx:constant="HAND" />
                             </cursor>
                             <opaqueInsets>
                                <Insets />
                             </opaqueInsets>
                          </Button>
                          <Button mnemonicParsing="false" prefHeight="46.0" prefWidth="48.0" style="-fx-background-color: black; -fx-border-color: white; -fx-border-insets: 0 10 0 0;">
                             <cursor>
                                <Cursor fx:constant="HAND" />
                             </cursor>
                             <graphic>
                                <ImageView fitHeight="30.0" fitWidth="32.0" pickOnBounds="true" preserveRatio="true" style="-fx-background-color: black; -fx-border-radius: 4px;">
                                   <image>
                                      <Image url="@../../img/icons_of_activities/icons8-search-filled-50.png" />
                                   </image>
                                </ImageView>
                             </graphic>
                          </Button>
                       <TextField />
                      </items>
                    </ToolBar>

Answer 1

通常，javafx 在从 FXML 文件加载时会加载并按照它们在文件中的顺序显示它们，因此在您的情况下，您可以简单地切换 <TextField /> 和 FXML 文件中的第一个按钮。

在某些窗格中不是这样，例如gridpanes，可以在元素中指定元素的网格中的行和列

<GridPane>
    <Text text="Welcome" GridPane.columnIndex="0" GridPane.rowIndex="0" GridPane.columnSpan="2"/>

    <Label text="User Name:" GridPane.columnIndex="0" GridPane.rowIndex="1"/>

    <TextField GridPane.columnIndex="1" GridPane.rowIndex="1"/>

    <Label text="Password:" GridPane.columnIndex="0" GridPane.rowIndex="2"/>

    <PasswordField fx:id="passwordField" GridPane.columnIndex="1" GridPane.rowIndex="2"/>
</GridPane>

因此，您可以交换顺序或切换到不同的窗格并明确布局其子项

Answer 2

工具栏中的项目以它们在items 列表中出现的顺序直观地显示。因此，要对它们重新排序，您只需对列表中的项目重新排序即可。

所以你可以做类似的事情

// remove the button:
toolbarForActivityPanel.getItems().remove(createOfActivityButton);
// remove the text field (need to provide an fx:id for the text field in FXML):
toolbarForActivityPanel.getItems().remove(textField);

// add the text field as the first element:
toolbarForActivityPanel.getItems().add(0, textField);
// add the button as the third element:
toolbarForActivityPanel.getItems().add(2, createOfActivityButton);

您可以像这样以任意方式操作项目列表（添加新元素、删除任何元素等）。唯一需要注意的是确保列表中不会出现两次相同的项目。