Блог

Главная - Вопросы по программированию - Создание прямоугольной сетки со смещением второго и третьего ряда?

Создание прямоугольной сетки со смещением второго и третьего ряда?

#java #javafx #grid-layout

Вопрос:

Я пытаюсь построить следующую прямоугольную сетку звезд, в которой вторая и третья строки смещены вправо, чтобы получить шаблон дизайна.

Желаемая сетка

Однако с помощью моего кода все, чего я добился, — это:

Мой код

Мой код таков:

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

}

Как я могу сдвинуть вторую и четвертую строки так, чтобы они выглядели как первое изображение?

Комментарии:

1. Существует несколько различных способов сделать это, один из которых-VBox, содержащий HBoxes, которые имеют разные вставки для нечетных/четных HBoxes.

2. Вы используете пять точечных звезд, а не шесть точечных звезд образца шаблона. Это намеренно?

3. Привет @jewelsea, нет, это была ошибка, но я постараюсь исправить это позже.. в первую очередь больше беспокоит дизайн сетки. Не могли бы вы, пожалуйста, уточнить, что вы имели в виду под VBox, содержащим HBoxes? Если я правильно понимаю, у меня должна быть сетка, и внутри этой сетки у меня должно быть 2 узла HBox с разными вставками?

4. Вам вообще не нужна решетка, только один VBox и столько HBox, сколько вам нужно. Хотя вы тоже могли бы сделать это так, как вы описываете, лично я бы просто пропустил решетку. Извините, в данный момент я не могу написать код для более подробного ответа.

5. вы могли бы попробовать использовать больше столбцов и охват столбцов

Ответ №1:

Как предложил @jewelsea, вы можете использовать a 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();
    }

}

Выход:

Сетка со звездами

Метки: