JavaFX VBox 布局

Question

我已经编写了使用 VBox 作为布局的代码。我希望按钮出现在顶行，然后绘制 2 条水平线，在 400x400 场景中应位于 y=200 和 300 处。但输出显示了我给出的不同坐标处的线条。

我知道这是因为我正在定义的布局。我的问题是这样的:

1)我可以以某种方式在真实坐标处绘制线条并保持相同的布局吗？

2) 如果不是，哪种 javafx 布局最适合此操作？

3)假设有一个 MenuBar 而不是该按钮，那么哪种布局最合适？

package practise;

import java.util.Random;
import javafx.application.Application;
import javafx.application.Platform;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Line;
import javafx.stage.Stage;

public class Practise extends Application {

    private int c = 0;

    @Override
    public void start(Stage primaryStage) {
        Button btn = new Button();
        VBox root = new VBox();

        Group group = new Group();

        final Line l1 = new Line(0,200,400,200);      
        final Line l2 = new Line(0,300,400,300);      

        btn.setText("Say 'Hello World'");
        btn.setOnAction(new EventHandler<ActionEvent>() {

            @Override
            public void handle(ActionEvent event) {
                System.out.println("Hello World!");
                }
            }
        );


        l1.setStroke(Color.YELLOW);
        l1.setStrokeWidth(2);
        l1.setLayoutX(0);
        l1.setLayoutY(0);
        l2.setStroke(Color.YELLOW);
        l2.setStrokeWidth(2);
        l2.setLayoutX(0);
        l2.setLayoutY(0);

        group.getChildren().add(l1);
        group.getChildren().add(l2);
        root.getChildren().add(btn);
        root.getChildren().add(group);

        Scene scene = new Scene(root, 400, 400, Color.WHITE);

        primaryStage.setTitle("Hello World!");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

}

Answer 1

1) 是的，这是可能的。设置the managed property设置为 false 会导致父级不布局子级。但这不会使下一个节点位于该线下方。

Button btn = new Button();
VBox root = new VBox();

final Line l1 = new Line(0, 200, 400, 200);
final Line l2 = new Line(0, 300, 400, 300);

l1.setManaged(false);
l2.setManaged(false);

btn.setText("Say 'Hello World'");
btn.setOnAction((ActionEvent event) -> {
    System.out.println("Hello World!");
});

l1.setStroke(Color.YELLOW);
l1.setStrokeWidth(2);
l2.setStroke(Color.YELLOW);
l2.setStrokeWidth(2);
root.getChildren().addAll(btn, l1, l2, rect);

2)

GridPane

允许指定行大小的约束。

Button btn = new Button();
Rectangle rect = new Rectangle(400, 10);
GridPane root = new GridPane();
root.getRowConstraints().add(new RowConstraints(200));

final Line l1 = new Line(0, 0, 400, 0);

btn.setText("Say 'Hello World'");
btn.setOnAction((ActionEvent event) -> {
    System.out.println("Hello World!");
});

l1.setStroke(Color.YELLOW);
l1.setStrokeWidth(2);
root.addColumn(0, btn, l1, rect);

分割 Pane

通过一些调整也可以做到这一点。

Button btn = new Button();
Rectangle rect = new Rectangle(400, 10);

// wrap contents in resizeable Nodes
SplitPane root = new SplitPane(new Pane(btn), new Pane(rect));

// place divider in the middle
root.setDividerPositions(0.5);
root.setOrientation(Orientation.VERTICAL);
root.getStyleClass().add("line-split");
root.getStylesheets().add(getClass().getResource("style.css").toExternalForm());

root.skinProperty().addListener((observable, oldValue, newValue) -> {
    // don't allow resizing
    newValue.getNode().lookupAll(".split-pane-divider").stream().forEach(divider -> divider.setDisable(true));
});

btn.setText("Say 'Hello World'");
btn.setOnAction((ActionEvent event) -> {
    System.out.println("Hello World!");
});

CSS

.line-split .split-pane-divider {
    -fx-min-height: 2;
    -fx-max-height: 2;
    -fx-background-color: yellow;
}

3) MenuBar 也是一个Node。似乎没有理由将其与 Button 区别对待。