JavaFX中使用GridPane实现虚拟键盘的行列按键对齐问题咨询

你无需拆分多个GridPane，以下两种实现方式改动量极小，就能实现真实键盘的错位对齐效果：

方案1：首键外边距偏移（最简洁，改动最少） #

仅需修改setRowIndexes方法，给每行的第一个按钮添加左侧外边距实现整行偏移，不需要调整其他按键的布局逻辑：

import javafx.geometry.Insets;

// 原setRowIndexes方法增加startOffset参数
private void setRowIndexes(int row, double startOffset, Button... buttons) {
    var column = 0;
    for (Button button : buttons) {
        GridPane.setConstraints(button, column, row);
        // 仅给每行第一个按钮设置左侧外边距
        if (column == 0) {
            GridPane.setMargin(button, new Insets(0, 0, 0, startOffset));
        }
        column++;
    }
}

调用方法时传入对应偏移量即可，你的单个按键宽度为60px，第二行偏移半个按键宽度30px正好让A键位于Q/W中间，第三行偏移一个按键宽度60px：

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

方案2：透明占位组件偏移 #

如果你不想用外边距，也可以用轻量的透明Region作为占位组件，不需要添加空白文本：

import javafx.scene.layout.Region;

// 在setup方法中创建两个占位组件
Region row2Offset = new Region();
row2Offset.setPrefSize(30, 60);
GridPane.setConstraints(row2Offset, 0, 1);

Region row3Offset = new Region();
row3Offset.setPrefSize(60, 60);
GridPane.setConstraints(row3Offset, 0, 2);

// 最后把占位组件加入GridPane
pane.getChildren().addAll(row2Offset, row3Offset,
        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);

使用该方案时第二、第三行的按键列索引从1开始设置即可。

内容的提问来源于stack exchange，提问作者Thomas Herondale