如何搭建响应式的 标签:字段 表单

用途。 使用 GridLayout 将 标签 + 字段 对按两个比例列对齐（例如标签 35%、字段 65%），这些列会随屏幕宽度自适应。

用到的 API

• new GridLayout(Position h, Position v) — 使用行的水平和垂直对齐（START、CENTER、END）创建网格。无参构造函数使用 START, START。
• grid.add(Object... v) — 添加一行。格式：所有宽度在前，然后是所有组件。 宽度是总宽度的分数（0.35f = 35%）；0f = 自动宽度（由组件决定）。宽度的数量必须等于组件的数量。
• 每行按其中最高的组件计算自身高度；各行垂直堆叠。

add 中参数的顺序：add(0.35f, 0.65f, label, campo) — 两个宽度在两个组件之前，而不是交错排列。传入 add(label, 0.35f, campo, 0.65f) 会抛出 UIException。

响应式：由于宽度是分数，当屏幕尺寸变化时布局会自行调整。如果需要绝对度量，请使用 Screen（而非 Gdx.graphics）。

完整示例（复制、粘贴并运行）

package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;
import dev.crossfly.ui.style.*;   // TextFieldStyle（在样式中配置）

/** 可执行的主界面。将 launcher 指向此类（classname）并运行：gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();

      GridLayout form = new GridLayout(Position.START, Position.START);
      setLayout(form);

      // 行：标签（35%）+ 字段（65%）
      TextField nome  = new TextField("");
      TextField email = new TextField("");
      form.add(0.35f, 0.65f, new Label("Nome"),  nome);
      form.add(0.35f, 0.65f, new Label("Email"), email);

      // 同一结构中带掩码的字段
      TextField cpf = new TextField("");
      cpf.<TextFieldStyle>getStyle()
         .mask("999.999.999-99".toCharArray())
         .mode(EditMode.NUMERIC, true);
      form.add(0.35f, 0.65f, new Label("CPF"), cpf);

      // 结果行
      Label resultado = new Label("");
      form.add(0.35f, 0.65f, new Label(""), resultado);

      // 自适应宽度行：两个按钮按内容确定尺寸
      Button salvar = new Button("Salvar");
      salvar.onAction(o ->
         resultado.setText(nome.getText() + " · " + cpf.getTextWithoutMask()));
      form.add(0f, 0f, new Button("Cancelar"), salvar);
   }
}

下面的片段只展示核心部分。要运行它，请将其放入上面的 MainWindow 骨架中。

最小片段

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;
import dev.crossfly.ui.style.*;
import static dev.crossfly.ui.UIConstants.Position;
import static dev.crossfly.ui.UIConstants.EditMode;

GridLayout form = new GridLayout(Position.START, Position.START);

// 行：标签（35%）+ 字段（65%）
form.add(0.35f, 0.65f, new Label("Nome"),  new TextField(""));
form.add(0.35f, 0.65f, new Label("Email"), new TextField(""));

// 同一结构中带掩码的字段
TextField cpf = new TextField("");
cpf.<TextFieldStyle>getStyle()
   .mask("999.999.999-99".toCharArray())
   .mode(EditMode.NUMERIC, true);
form.add(0.35f, 0.65f, new Label("CPF"), cpf);

// 自适应宽度行：两个按钮按内容确定尺寸
form.add(0f, 0f, new Button("Cancelar"), new Button("Salvar"));

按父组件的模式将 GridLayout 添加到屏幕的容器/窗口中。

深入了解

• 文本字段 · 焦点与验证
• 姊妹配方：CPF/CEP/日期掩码 · 密码字段