使用GridPane為不同行中的每個單元格實作唯一的列寬？

我想在信用卡資料建模JavaFx使用GridPane：

我的模型包含 3 行（注意：每個欄位由標簽 文本欄位組成）：

第 1 行：名字和姓氏（4 個欄位）

第 2 行：信用卡號（2 個欄位）

第 3 行：到期日期 - 月、年 CVV（6 個欄位）

請看下面的截圖：

我正在閱讀本教程，其中指出：

同一行中的所有單元格將具有相同的高度，并且同一列中的所有單元格將具有相同的寬度。不同的行可以有不同的高度，不同的列可以有不同的寬度。

是否有任何解決方法可以在 a 中逐行使用不同大小的列GridPane？

uj5u.com熱心網友回復：

對于影像中的特定布局，我將使用VBoxwithHBox表示行：

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.Pane;
import javafx.scene.layout.VBox;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Priority;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.geometry.Insets;
import javafx.geometry.Pos;

public class App extends Application {

    @Override
    public void start(Stage stage) {

        Label lblFirst = new Label("First");
        Label lblLast = new Label("Last");
        Label lblNumber = new Label("Card Number");
        Label lblMonth = new Label("Month");
        Label lblYear = new Label("Year");
        Label lblCVV = new Label("CVV");
        
        TextField txtFirst = new TextField();
        TextField txtLast = new TextField();
        TextField txtNumber = new TextField();
        TextField txtMonth = new TextField();
        TextField txtYear = new TextField();
        TextField txtCVV = new TextField();

        HBox row1 = new HBox(10);
        HBox row2 = new HBox(10);
        HBox row3 = new HBox(10);
        
        row1.getChildren().add(createCell(lblFirst, txtFirst));
        row1.getChildren().add(createCell(lblLast, txtLast));
        
        row2.getChildren().add(createCell(lblNumber, txtNumber));
        
        row3.getChildren().add(createCell(lblMonth, txtMonth));
        row3.getChildren().add(createCell(lblYear, txtYear));
        row3.getChildren().add(createCell(lblCVV, txtCVV));
        
        VBox rows = new VBox(10, row1, row2, row3);
        
        StackPane.setMargin(rows, new Insets(10));
        
        StackPane root = new StackPane(rows);

        Scene scene = new Scene(root);

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

    private static HBox createCell(Label label, TextField text) {
        HBox pane = new HBox(5, label, text);
        label.setMinWidth(Pane.USE_PREF_SIZE);
        text.setMinWidth(50);
        pane.setAlignment(Pos.CENTER);
        HBox.setHgrow(pane, Priority.ALWAYS);
        HBox.setHgrow(text, Priority.ALWAYS);
        return pane;
    }

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

}

輸出：

uj5u.com熱心網友回復：

1 @JamesD 的建議和 @Oboe 的回答。理想情況下，我會將每一行布局分開，以簡單的方式處理它，而不是僅使用一個 GridPane 使其復雜。

話雖如此，如果您想使用或了解如何使用一個 GridPane 進行類似的布局，下面的實作可能會給您一個快速的想法。

首先將您的布局拆分為所需的列，以確定您需要的總列數。（如下圖所示）

現在您將知道哪個節點將位于哪個列以及它將占據多少列（colspan）

我將解釋一個節點：

假設您要插入名字欄位。如果你在圖中注意到，它在 rowIndex: 0, columnIndex: 1 中，它占據了 4 列，所以 colSpan 值將是 4。 這里我們沒有合并任何行，因此 rowSpan 值將始終為 1。

pane.add(getField(), 1, 0, 4, 1); // node, colIndex, rowIndex, colSpan, rowSpan

同樣，您可以關聯其余的節點布局。而且為了更精確，您可以使用 ColumnConstraints 設定每列的首選寬度。以下是布局和約束的完整代碼：

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.CheckBox;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Region;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class CreditCardPaneDemo extends Application {
    @Override
    public void start(Stage stage) throws Exception {
        VBox root = new VBox();
        root.setPadding(new Insets(5));
        root.setSpacing(10);
        Scene scene = new Scene(root,300,200);
        stage.setScene(scene);
        stage.setTitle("CreditCard");
        stage.show();

        GridPane pane = new GridPane();
        pane.setStyle("-fx-border-color:black;-fx-border-width:1px;-fx-background-color:yellow");
        pane.setPadding(new Insets(5));
        pane.setHgap(5);
        pane.setVgap(5);

        pane.add(getLabel("First"), 0, 0, 1, 1);
        pane.add(getField(), 1, 0, 4, 1);
        pane.add(getLabel("Last"), 5, 0, 1, 1);
        pane.add(getField(), 6, 0, 2, 1);

        pane.add(getLabel("Card Number"), 0, 1, 3, 1);
        pane.add(getField(), 3, 1, 5, 1);

        pane.add(getLabel("Month"), 0, 2, 2, 1);
        pane.add(getField(), 2, 2, 2, 1);
        pane.add(getLabel("Year"), 4, 2, 1, 1);
        pane.add(getField(), 5, 2, 1, 1);
        pane.add(getLabel("CVV"), 6, 2, 1, 1);
        pane.add(getField(), 7, 2, 1, 1);

        pane.getColumnConstraints().addAll(getCc(70), getCc(20), getCc(80), getCc(20), getCc(25), getCc(90), getCc(80), getCc(100));

        CheckBox gridLines = new CheckBox("Show grid lines");
        gridLines.selectedProperty().addListener((obs, old, val) -> pane.gridLinesVisibleProperty().set(val));
        root.getChildren().addAll(gridLines, pane);
    }

    private ColumnConstraints getCc(double width) {
        ColumnConstraints cc = new ColumnConstraints();
        cc.setPrefWidth(width);
        return cc;
    }

    private Label getLabel(String txt) {
        Label lbl = new Label(txt);
        lbl.setMinWidth(Region.USE_PREF_SIZE);
        return lbl;
    }

    private TextField getField() {
        TextField field = new TextField();
        field.setMaxWidth(Double.MAX_VALUE);
        return field;
    }
}

標籤：爪哇 用户界面 javafx

上一篇：root.after不遞回到相同的函式-Tkinter

下一篇：Matlab：如何通過滑鼠單擊（使用“ButtonDownFcn”）將多個變數點從繪圖中保存到作業區中？