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

Question

我想用 TextField 交换 Button。怎么做？

听说有方法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

工具栏中的项目按照它们在 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);

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

Answer 2

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

有些panes不是这样的，比如gridpanes，你可以在元素的grid中指定行和列

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

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

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

How do I swap the children of a parent node in JavaFX?

java

swap

children

javafx