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

Question

我想将按钮与文本字段交换。怎么做？

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

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

所以你可以做类似的事情

// 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);

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