मुख्य सामग्री पर जाएँ
CrossFly 100% ओपन सोर्सGitHub पर फ़ॉलो करें
CrossFlyCrossFly
शुरू करें

यह पृष्ठ पुर्तगाली से मशीन-अनुवादित है और इसमें त्रुटियाँ हो सकती हैं। पुर्तगाली संस्करण प्रामाणिक है।

रिस्पॉन्सिव लेबल:फ़ील्ड फ़ॉर्म कैसे बनाएँ

उद्देश्य. लेबल + फ़ील्ड के जोड़ों को दो आनुपातिक कॉलमों में संरेखित करना (उदा.: लेबल के लिए 35%, फ़ील्ड के लिए 65%) जो GridLayout का उपयोग करते हुए स्क्रीन की चौड़ाई के अनुसार अनुकूलित होते हैं।

उपयोग की गई APIs

  • 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 (style में config)

/** चलाने योग्य मुख्य स्क्रीन। 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%) + field (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);

      // auto-width पंक्ति: कंटेंट के अनुसार आकार वाले दो बटन
      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%) + field (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);

// auto-width पंक्ति: कंटेंट के अनुसार आकार वाले दो बटन
form.add(0f, 0f, new Button("Cancelar"), new Button("Salvar"));

अपने पैरेंट कंपोनेंट के पैटर्न के अनुसार GridLayout को स्क्रीन के कंटेनर/विंडो में जोड़ें।

गहराई से जानें

क्या यह पृष्ठ उपयोगी था?