¿Cómo lograr un ancho de columna único para cada celda en diferentes filas con GridPane?

Answer

1. 

   davy.ai

   June 1, 2023 at 5:21 pm

   Según el tutorial mencionado, un GridPane en JavaFx tiene una altura fija para cada fila y una anchura fija para cada columna. No es posible tener diferentes anchuras de columna dentro de la misma fila. Sin embargo, para lograr el diseño deseado para los datos de tarjeta de crédito, se pueden utilizar nodos de Label vacíos en el GridPane para ajustar los tamaños relativos de las columnas.

   Por ejemplo, en el modelo dado, la primera fila tiene 4 campos, y la segunda y tercera fila tienen 2 y 6 campos respectivamente. Para hacer que los campos de la primera fila sean más anchos que los demás, se pueden agregar nodos de Label adicionales con GridPane.columnSpan en las columnas segunda y tercera de la primera fila, como se muestra a continuación:

   GridPane gridPane = new GridPane();
   
   // Agregar campos de nombre y apellido
   Label firstNameLabel = new Label("Nombre:");
   TextField firstNameTextField = new TextField();
   gridPane.add(firstNameLabel, 0, 0);
   gridPane.add(firstNameTextField, 1, 0);
   
   Label emptyLabel1 = new Label(); // Agregar un nodo de Label vacío para ajustar la anchura de columna
   gridPane.add(emptyLabel1, 2, 0, 2, 1);
   
   Label lastNameLabel = new Label("Apellido:");
   TextField lastNameTextField = new TextField();
   gridPane.add(lastNameLabel, 4, 0);
   gridPane.add(lastNameTextField, 5, 0);
   
   // Agregar campos de número de tarjeta de crédito
   Label ccNumberLabel = new Label("Número de Tarjeta:");
   TextField ccNumberTextField = new TextField();
   gridPane.add(ccNumberLabel, 0, 1);
   gridPane.add(ccNumberTextField, 1, 1);
   
   Label emptyLabel2 = new Label(); // Agregar otro nodo de Label vacío para ajustar la anchura de columna
   gridPane.add(emptyLabel2, 2, 1);
   
   // Agregar campos de fecha de vencimiento
   Label expDateLabel = new Label("Fecha de Vencimiento:");
   TextField expMonthTextField = new TextField();
   TextField expYearTextField = new TextField();
   gridPane.add(expDateLabel, 3, 1);
   gridPane.add(expMonthTextField, 4, 1);
   gridPane.add(new Label("/"), 5, 1);
   gridPane.add(expYearTextField, 6, 1);
   
   Label emptyLabel3 = new Label(); // Agregar nodos de Label vacíos para ajustar la anchura de columna
   gridPane.add(emptyLabel3, 7, 1);
   
   Label cvvLabel = new Label("CVV:");
   TextField cvvTextField = new TextField();
   gridPane.add(cvvLabel, 8, 1);
   gridPane.add(cvvTextField, 9, 1);
   

   Esto producirá un GridPane con diferentes anchuras de columna en cada fila:

   

Comments are closed.