制作第二行和第三行偏移的矩形网格？答案

【问题标题】：Making rectangular grid with the second and third row offset?制作第二行和第三行偏移的矩形网格？
【发布时间】：2021-10-20 02:06:05
【问题描述】：

我正在尝试构建以下矩形网格，其中第二行和第三行向右偏移以实现设计模式。

但是，通过我的代码，我实现的只是：

我的代码是：

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.HPos;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.*;
import javafx.stage.Stage;

import java.util.Random;

public class Main extends Application {

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

@Override
public void start(Stage primaryStage) {
    GridPane grid = new GridPane();
    Random rand = new Random();
    int colNum = 0;

    //Shapes
    for (int row = 0; row < 4; row++) {
        if (row == 1 || row == 3)
            colNum = 6;
        else
            colNum = 7;
        for (int col = 0; col < colNum; col++) {
            Polygon star = new Polygon(25, 0, 15, 20, 0, 20, 10, 40, 5, 60, 25, 50, 45, 60, 40, 40, 50, 20, 35, 20);
            star.setFill(Color.WHITE);

            star.setStroke(Color.BLACK);
            GridPane.setRowIndex(star, row);
            GridPane.setColumnIndex(star, col);

            GridPane.setHalignment(star, HPos.RIGHT);
            grid.getChildren().addAll(star);
        }
    }

    Scene scene = new Scene(grid, 1024, 800, true);
    primaryStage.setScene(scene);


    primaryStage.show();
    }

}

如何偏移第二行和第四行，使其看起来像第一张图片？

【问题讨论】：

有几种不同的方法可以做到这一点，一种是包含 HBoxes 的 VBox，对于奇数/偶数 HBoxes 有不同的insets。
您使用五点星而不是示例模式的六点星。这是故意的吗？
嗨@jewelsea，不，这是一个错误，但我稍后会尝试修复它..首先更关注网格设计。您能否澄清一下您所说的包含 HBoxes 的 VBox 是什么意思？如果我理解正确，我应该有一个 gridPane，并且在该 gridPane 内，我应该有 2 个不同插图的 hBox 节点？
您根本不需要网格窗格，只需一个 VBox 和尽可能多的 HBox。尽管您也可以按照您描述的方式进行操作，但就个人而言，您只需跳过 GridPane。抱歉，我目前无法编写代码以获得更详细的答案。
你可以尝试使用更多的列和列跨度

标签： java javafx grid-layout

【解决方案1】：

正如@jewelsea 建议的那样，您可以使用VBox 进行布局，使用HBox 进行行：

public class App extends Application {

    @Override
    public void start(Stage stage) {

        Pane row1 = createRow("0,0", "1,0", "2,0", "3,0", "4,0", "5,0", "6,0");
        Pane row2 = createRow("0,1", "1,1", "2,1", "3,1", "4,1", "5,1");
        Pane row3 = createRow("0,2", "1,2", "2,2", "3,2", "4,2", "5,2", "6,2");
        Pane row4 = createRow("0,3", "1,3", "2,3", "3,3", "4,3", "5,3");

        VBox pane = new VBox(row1, row2, row3, row4);
        pane.setAlignment(Pos.CENTER);
        pane.setStyle("-fx-background-color: #37474f; -fx-padding: 20;");

        Scene scene = new Scene(pane);

        stage.setScene(scene);
        stage.show();
    }

    private static Pane createRow(String... texts) {
        HBox pane = new HBox();
        pane.setAlignment(Pos.CENTER);

        Arrays.stream(texts).map(App::createStar)
                .forEach(pane.getChildren()::add);

        return pane;
    }

    private static Pane createStar(String text) {
        Polygon star = new Polygon(15, 0, 30, 10, 45, 0, 45, 17.32, 60, 25.98, 45, 34.64, 45, 51.96, 30, 43.3, 15, 51.96, 15, 34.64, 0, 25.98, 15, 17.32, 15, 0);
    
        star.setFill(Color.TRANSPARENT);
        star.setStrokeWidth(2);
        star.setStroke(Color.BLACK);
  
        // Removes the small gap between rows
        star.setScaleX(1.1);
        star.setScaleY(1.1);

        Label label = new Label(text);
        label.setFont(Font.font("Arial", FontWeight.BOLD, 16));
        label.setTextFill(Color.WHITE);
    
        StackPane pane = new StackPane();
        pane.getChildren().addAll(star, label);
    
        return pane;
    }

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

}

输出：

【讨论】：