JavaFX中虚拟键盘的对齐键[重复]

Question

我用JavaFX设计了一个简单的虚拟键盘，用于一个刽子手风格的游戏。唯一的问题是，我无法获得正确的第二行和第三行的对齐方式，就像真正的键盘设计一样（例如，a键几乎在Q键和W键之间）。
键盘只是使用网格窗格实现的，网格窗格中每个字符都有一个按钮。
有没有办法插入一点空白？我真的想过堆叠三个gridpane，每行一个，然后添加正确的偏移量作为空白文本，但这在我看来有点勉强，所以我想知道是否有一种“更干净”的方法。
以下是我的代码：

package gui;

import game.GameManager;
import javafx.scene.control.Button;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;

public class VirtualKeyboard extends HBox {
    private final GridPane pane;
    private final GameManager gameManager;
    private static final char[] orderedKeys = {'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P',
                                                'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L',
                                                'Z', 'X', 'C', 'V', 'B', 'N', 'M'};

    public VirtualKeyboard(GameManager gameManager) {
        this.pane = new GridPane();
        this.gameManager = gameManager;
        this.getChildren().add(pane);
        setup();
    }

    @Override
    public void setPrefSize(double v, double v1) {
        super.setPrefSize(v, v1);
        pane.setPrefSize(v, v1);
    }

    private void setup() {
        var qButton = new Button("Q");
        var wButton = new Button("W");
        var eButton = new Button("E");
        var rButton = new Button("R");
        var tButton = new Button("T");
        var yButton = new Button("Y");
        var uButton = new Button("U");
        var iButton = new Button("I");
        var oButton = new Button("O");
        var pButton = new Button("P");
        var aButton = new Button("A");
        var sButton = new Button("S");
        var dButton = new Button("D");
        var fButton = new Button("F");
        var gButton = new Button("G");
        var hButton = new Button("H");
        var jButton = new Button("J");
        var kButton = new Button("K");
        var lButton = new Button("L");
        var zButton = new Button("Z");
        var xButton = new Button("X");
        var cButton = new Button("C");
        var vButton = new Button("V");
        var bButton = new Button("B");
        var nButton = new Button("N");
        var mButton = new Button("M ");

        setRowIndexes(0, qButton, wButton, eButton, rButton, tButton, yButton, uButton, iButton, oButton, pButton);
        setRowIndexes(1, aButton, sButton, dButton, fButton, gButton, hButton, jButton, kButton, lButton);
        setRowIndexes(2, zButton, xButton, cButton, vButton, bButton, nButton, mButton);

        buttonSetup(qButton, wButton, eButton, rButton, tButton, yButton, uButton, iButton, oButton, pButton,
                aButton, sButton, dButton, fButton, gButton, hButton, jButton, kButton, lButton,
                zButton, xButton, cButton, vButton, bButton, nButton, mButton);

        pane.getChildren().addAll(
                qButton, wButton, eButton, rButton, tButton, yButton, uButton, iButton, oButton, pButton,
                aButton, sButton, dButton, fButton, gButton, hButton, jButton, kButton, lButton,
                zButton, xButton, cButton, vButton, bButton, nButton, mButton);
    }

    private void buttonSetup(Button... buttons) {
        var keyCounter = 0;
        for (Button button : buttons) {
            button.setPrefSize(60.0, 60.0);
            int finalKeyCounter = keyCounter;
            button.setOnMouseClicked(mouseEvent -> gameManager.guess(orderedKeys[finalKeyCounter]));
            button.getStyleClass().add("keyboard-button");
            button.getStylesheets().add("file:stylesheets/virtual-keyboard.css");
            keyCounter++;
            //TODO: add in stylesheet and remove
            button.setStyle("-fx-font-size: 22; -fx-font-weight: bold");

        }
    }

    private void setRowIndexes(int row, Button... buttons) {
        var column = 0;
        for (Button button : buttons) {
            GridPane.setConstraints(button, column, row);
            column++;
        }
    }

}

Answer 1

我认为使用单个网格是不正确的，因为第一个元素总是垂直对齐的。

也许可以尝试使用3个堆叠的网格窗格，并修改添加的第一个元素的大小，以偏移'a'键的起始位置。像这样构造的标签是不可见的吗？

 Label label = new Label();
 GridPane.setConstraints(label, ...);

得到的网格看起来有点像这样

GRID1 =                        [Q]...
GRID2 = [invisible skinny label][A][S]...
GRID3 = [invisible less skinny   ][Z][X]...

这里有一个单一网格布局的想法，其中跨越单元格是可能的。一个按钮跨越4个宽度，“A行间隔”跨越1个宽度，“Z行间隔”跨越3个宽度。如果标准宽度为4宽，则W不会出现在Z上方。

|   |   |
[Q ][W ]...
_[A ][S ]...
___[Z ][X ]...
|   |   |