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

工具栏中的项目按照它们在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文件中的第一个按钮。

在某些窗格中不是这种情况，例如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>

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

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

2 个答案: