JavaFX - 绝对布局，组件可以在不移动的情况下扩展到另一个组件

Question

我有一个具有“已查看”和“已编辑”两种状态的组件。当“编辑”时，组件必须显示一些控件并占用更多的水平空间。在一个视图中，我有许多垂直显示的组件。而且我想让“已编辑”组件悬停在他的兄弟姐妹上，这样视图就不会垂直调整大小。

              All "viewed"                     One "edited"
              +--------------------+           +--------------------+
              | +----------------+ |           | +----------------+ |
              | | Lorem ipsum    | |           | | Lorem ipsum    | |
              | | dolor.         | |           | | dolor.         | |
              | +----------------+ |           | +----------------+ |
              | +----------------+ |           |+------------------+|
              | | Will be edited | |           ||  I am edited     ||
              | +----------------+ |           ||..................||
              | +----------------+ |           ||  [Cancel] [Save] ||
              | | Will be        | |           |+------------------+|
              | |partially hidden| |           | |partially hidden| |  
              | +----------------+ |           | +----------------+ |
              +--------------------+           +--------------------+

作为 JavaFx 的新手，我不得不承认我不知道该怎么做。我读过“绝对”Pane 或AnchorPane 可能有助于显示一个组件悬停另一个组件。似乎StackPane 也可以在编辑时用于隐藏或显示组件。

您是否知道可以用于该效果的某些东西，或者您能给我一些有关如何构建它的提示吗？

坦克很多

Answer 1

这是一个如何使用StackPane 的示例：

控制器类：

package example;

import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;

import java.net.URL;
import java.util.ResourceBundle;

public class Controller implements Initializable {

    @FXML
    private TextField leftTF, rightTF;

    @Override
    public void initialize(URL url, ResourceBundle resourceBundle) {

        TextField[] tfs = new TextField[]{leftTF, rightTF};

        for (TextField tf : tfs) {

            // Create and show buttons under the text field on text changed:
            tf.textProperty().addListener((observable, oldValue, newValue) -> {
                VBox vBox = (VBox) tf.getParent();
                if (vBox.getChildren().size() == 1) {
                    Button cancelBtn = new Button("Cancel");
                    Button saveBtn = new Button("Save");
                    HBox hBox = new HBox(cancelBtn, saveBtn);
                    hBox.setStyle("-fx-background-color: lightgrey; -fx-border-color: black; -fx-padding: 3;");
                    hBox.setAlignment(Pos.CENTER);
                    vBox.getChildren().add(hBox);

                    // Lower left and right padding to have more space horizontally:
                    vBox.setPadding(new Insets(5, 3, 10, 3));
                    vBox.toFront();

                    // Remove overlaying box on button click and change padding to original values:
                    Button[] btns = new Button[]{cancelBtn, saveBtn};
                    for (Button btn : btns) {
                        btn.setOnAction(event -> {
                            vBox.getChildren().remove(1);
                            vBox.setPadding(new Insets(5, 10, 10, 10));
                            tf.requestFocus();
                        });
                    }
                }
            });
        }
    }
}

FXML：

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

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>

<HBox spacing="20.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="example.Controller">
   <children>
      <GridPane hgap="10.0" style="-fx-background-color: lightgrey;">
        <columnConstraints>
          <ColumnConstraints hgrow="NEVER" maxWidth="-Infinity" minWidth="-Infinity" prefWidth="150.0" />
        </columnConstraints>
        <rowConstraints>
          <RowConstraints minHeight="10.0" vgrow="SOMETIMES" />
          <RowConstraints minHeight="10.0" vgrow="NEVER" />
        </rowConstraints>
         <HBox.margin>
            <Insets />
         </HBox.margin>
         <children>
            <AnchorPane>
               <children>
                  <Label style="-fx-background-color: lightblue;" text="Lorem ipsum dolor." wrapText="true" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
                     <padding>
                        <Insets bottom="3.0" left="3.0" right="3.0" top="3.0" />
                     </padding>
                  </Label>
               </children>
               <GridPane.margin>
                  <Insets bottom="5.0" left="10.0" right="10.0" top="10.0" />
               </GridPane.margin>
            </AnchorPane>
            <StackPane GridPane.rowIndex="1">
               <GridPane.margin>
                  <Insets />
               </GridPane.margin>
               <children>
                  <VBox alignment="TOP_CENTER">
                     <children>
                        <TextField fx:id="leftTF" text="not being edited">
                           <VBox.margin>
                              <Insets />
                           </VBox.margin>
                        </TextField>
                     </children>
                     <StackPane.margin>
                        <Insets />
                     </StackPane.margin>
                     <padding>
                        <Insets bottom="10.0" left="10.0" right="10.0" top="5.0" />
                     </padding>
                  </VBox>
                  <AnchorPane style="-fx-background-color: tomato;">
                     <StackPane.margin>
                        <Insets bottom="10.0" left="10.0" right="10.0" top="40.0" />
                     </StackPane.margin>
                     <children>
                        <VBox AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
                           <children>
                              <Label text="Will be" />
                              <Label layoutX="10.0" layoutY="10.0" text="partially hidden" />
                           </children>
                           <padding>
                              <Insets bottom="3.0" left="3.0" right="3.0" top="3.0" />
                           </padding>
                        </VBox>
                     </children>
                  </AnchorPane>
               </children>
            </StackPane>
         </children>
      </GridPane>
      <GridPane hgap="10.0" layoutX="10.0" layoutY="10.0" style="-fx-background-color: lightgrey;">
         <columnConstraints>
            <ColumnConstraints hgrow="NEVER" maxWidth="-Infinity" minWidth="-Infinity" prefWidth="150.0" />
         </columnConstraints>
         <rowConstraints>
            <RowConstraints minHeight="10.0" vgrow="SOMETIMES" />
            <RowConstraints minHeight="10.0" vgrow="NEVER" />
         </rowConstraints>
         <children>
            <AnchorPane>
               <children>
                  <Label style="-fx-background-color: lightblue;" text="Lorem ipsum dolor." wrapText="true" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
                     <padding>
                        <Insets bottom="3.0" left="3.0" right="3.0" top="3.0" />
                     </padding>
                  </Label>
               </children>
               <GridPane.margin>
                  <Insets bottom="5.0" left="10.0" right="10.0" top="10.0" />
               </GridPane.margin>
            </AnchorPane>
            <StackPane GridPane.rowIndex="1">
               <GridPane.margin>
                  <Insets />
               </GridPane.margin>
               <children>
                  <VBox alignment="TOP_CENTER">
                     <children>
                        <TextField fx:id="rightTF" text="being edited">
                           <VBox.margin>
                              <Insets />
                           </VBox.margin>
                        </TextField>
                     </children>
                     <StackPane.margin>
                        <Insets />
                     </StackPane.margin>
                     <padding>
                        <Insets bottom="10.0" left="10.0" right="10.0" top="5.0" />
                     </padding>
                  </VBox>
                  <AnchorPane style="-fx-background-color: tomato;">
                     <StackPane.margin>
                        <Insets bottom="10.0" left="10.0" right="10.0" top="40.0" />
                     </StackPane.margin>
                     <children>
                        <VBox AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
                           <children>
                              <Label text="Will be" />
                              <Label text="partially hidden" />
                           </children>
                           <padding>
                              <Insets bottom="3.0" left="3.0" right="3.0" top="3.0" />
                           </padding>
                        </VBox>
                     </children>
                  </AnchorPane>
               </children>
            </StackPane>
         </children>
      </GridPane>
   </children>
</HBox>

预览：