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

如果要设置绝对位置，则应使用AnchorPane。只将VBox更改为AnchorPane并且可以正常工作。

Answer 2

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

`SplitPane`

也可以做一些调整。

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。

JavaFX VBox布局

2 个答案:

`GridPane`

`SplitPane`