+1 สำหรับสิ่งที่@JamesD แนะนำและ@ปี่โอโบคำตอบ เข้าท่าดีนิเราจะทำทุกอย่างที่เราทำฉันจะแยกแต่ละแถวด้วผังแป้นพิมพ์เพื่อรับมือกับมันในทางที่ง่ายกว่าทำให้มันซับซ้อนใช้คนเดียวที่ GridPane.
ถึงจะพูดอย่างนั้นถ้าคุณอยากไปกับหรือเรียนรู้เกี่ยวกับเรื่องที่เธอสามารถทำอย่างที่คล้ายกัน layouting โดยใช้หนึ่ง GridPane ที่ด้านล่าง implemenation นอาจจะช่วยให้คุณเร็วความคิด
แยกกันอย่างแรกเลยก็คือผังแป้นพิมพ์ของคุณเข้าไปในการคอลัมน์ที่จะคิดให้ออกไปกี่คนทั้งหมดสดมภ์คุณต้องการ (เป็นที่ด้านล่างรูปภาพ)
ตอนนี้คุณจะรู้ว่าจุดเชื่อมต่ออยู่ข้างในซึ่งคอลัมน์และอีกกี่คอลัมน์มันจะดำรง(colspan)
ฉันจะอธิบายสำหรับหนึ่งโหนด:
ปล่อยให้บอกเอง..ว่าคุณต้องการแทรกสนามของชื่อต้นนาง ถ้าคุณสังเกตเห็นในรูปมันอยู่ใน rowIndex:0,columnIndex:1 และมันเป็นมืออาชีพ 4 คอลัมน์ที่ colSpan ค่าจะเป็น 4. ที่นี่เราไม่ใช่การรวมพลังที่กระจัดการอะไรแถวดังนั้น rowSpan ค่าจะถูกเสมอ 1 เลย
pane.add(getField(), 1, 0, 4, 1); // node, colIndex, rowIndex, colSpan, rowSpan
เหมือนๆกันคุณสามารถเชื่อมโยงที่เหลือของโหนดต่างๆ layouting. แล้วก็สำหรับมากก precising คุณสามารถตั้งค่า prefered ความกว้างของแต่ละคอลัมน์โดยใช้ 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;
}
}