我试图模型的信用卡的数据 JavaFx
使用 GridPane
:
我的模型包含3排(注:每个领域包括标签+文字段):
第1行:第一名和姓(4段)
第2行:信用卡号码(2段)
第3行:过期的日期一个月,一年+信(6段)
见下图:
我正在读 这个教程, 其中规定:
所有细胞中的同行具有同样的高度,所有的细胞 同一列将具有相同的宽度。 不同行可以有 不同的高度和不同的列可以有不同的宽度。
是否有任何解决办法为具有不同的尺寸列在一排排的基础上在一个 GridPane
?
我试图模型的信用卡的数据 JavaFx
使用 GridPane
:
我的模型包含3排(注:每个领域包括标签+文字段):
第1行:第一名和姓(4段)
第2行:信用卡号码(2段)
第3行:过期的日期一个月,一年+信(6段)
见下图:
我正在读 这个教程, 其中规定:
所有细胞中的同行具有同样的高度,所有的细胞 同一列将具有相同的宽度。 不同行可以有 不同的高度和不同的列可以有不同的宽度。
是否有任何解决办法为具有不同的尺寸列在一排排的基础上在一个 GridPane
?
对于具体布局中的图像,我会用一个 VBox
与 HBox
进行:
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();
}
}
输出:
+1什么@JamesD建议和@双簧管答案。 理想情况下,我想单独的每一行的布局,以处理它在简单的方法比使其复杂的采用只有一个GridPane.
具有说,如果你想要去与或了解你怎么可以做的类似的布局使用的一个GridPane,下面加以执行可以给你一个简单的想法。
首先分割你的布局成需要列,找出共有多少列的需要。 (正如在下面的图像)
现在你就会知道哪些节点将坐在这列和多少列,它将占用(colspan)
我会解释为一个节点:
可以说你想要插入的领域的第一名。 如果你发现的图片,这是在rowIndex:0,columnIndex:1,这是占领国4所列,所以colSpan值会是4. 在这里,我们不是相结合的任何行,因此行的价值将始终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;
}
}
getCc
-该哨兵定义中的地区都好是bounderies的数谱:)