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

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

Button

Button सबसे बुनियादी इंटरैक्टिव घटक है: यह टेक्स्ट और/या आइकन दिखाता है और टैप किए जाने पर एक क्रिया ट्रिगर करता है, दबाए जाने की दृश्य अवस्था के साथ (ButtonStyle के माध्यम से)। जब टेक्स्ट और आइकन दोनों हों, तो उनके बीच सापेक्ष स्थिति TextPos enum द्वारा नियंत्रित होती है। यह अन्य विजेट्स का आधार भी है (उदाहरण के लिए, Dropdown extends Button)।

क्रिया onAction(Action) से पंजीकृत की जाती है (Component से विरासत में मिली); ट्रिगर मानक क्लिक प्रवाह में होता है (onTouchUp में runActions()), onTouchDown में नहीं।

🟢 · पैकेज: dev.crossfly.ui · विस्तार करता है: Component · शैली: ButtonStyle

कब उपयोग करें

  • कोई भी टैप करने योग्य क्रिया: सहेजना, पुष्टि करना, नेविगेट करना, डायलॉग खोलना।
  • केवल-आइकन बटन (टूलबार) या केवल-टेक्स्ट बटन (लिंक/द्वितीयक क्रिया)।

कब उपयोग न करें

  • स्थैतिक लेबल → Label का उपयोग करें।
  • स्थायी चालू/बंद टॉगल → Switch/Option का उपयोग करें (देखें ui/)।

दिखावट

टेक्स्ट और/या आइकन बटन के अंदर केंद्रित। दोनों उपस्थित होने पर, [आइकन + gap + टेक्स्ट] ब्लॉक दोनों अक्षों पर केंद्रित होता है; icongap अंतराल परिभाषित करता है। स्थिति TextPos का अनुसरण करती है:

TextPos लेआउट isHorizontal()
NONE टेक्स्ट और आइकन आरोपित (केंद्रित) false
TEXT_AT_LEFT आइकन के बाईं ओर टेक्स्ट true
TEXT_AT_RIGHT आइकन के दाईं ओर टेक्स्ट true
TEXT_AT_TOP आइकन के ऊपर टेक्स्ट false
TEXT_AT_BOTTOM आइकन के नीचे टेक्स्ट false

यदि textPos == null, तो डिफ़ॉल्ट केंद्रित आरोपण है (NONE के समतुल्य)।

``

संपूर्ण उदाहरण (कॉपी करें, पेस्ट करें और चलाएँ)

package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;

/** चलाने योग्य मुख्य स्क्रीन। launcher (classname) की ओर संकेत करें और चलाएँ: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      // Label जो दिखाता है कि बटन को कितनी बार छुआ गया
      Label saida = new Label("Cliques: 0");
      add(LAY_AUTO, saida);

      // callback के अंदर उपयोग किया गया परिवर्तनीय काउंटर (1 स्थिति का array)
      final int[] cliques = {0};

      // बटन जो काउंटर बढ़ाता है और हर टच पर Label अपडेट करता है
      Button botao = new Button("Clique aqui")
         .onAction(c -> saida.setText("Cliques: " + (++cliques[0])));
      add(LAY_AUTO, botao);
   }
}

नीचे दिए गए स्निपेट केवल मूल भाग दिखाते हैं (जो onShow() के अंदर जाता है)। चलाने के लिए, इन्हें ऊपर दिए MainWindow कंकाल में रखें।

बुनियादी उपयोग

Button b = new Button("Salvar").onAction(c -> salvar());
container.add(LAY_AUTO, b);

कंस्ट्रक्टर

कंस्ट्रक्टर विवरण
Button(String text) केवल टेक्स्ट वाला बटन
Button(Icon icon) केवल आइकन वाला बटन
Button(String text, Icon icon, TextPos textPos) सापेक्ष स्थिति के साथ टेक्स्ट + आइकन

गुण और अनुकूलन

गुण / मेथड प्रकार डिफ़ॉल्ट क्या करता है
setText(String) void — टेक्स्ट बदलता है, लेआउट को अमान्य करता है और repaint() कॉल करता है
icon(Icon, TextPos) Button (fluente) — आइकन और टेक्स्ट के सापेक्ष उसकी स्थिति परिभाषित करता है
text / icon / textPos सार्वजनिक फ़ील्ड — वर्तमान सामग्री (पढ़ी/असाइन की जा सकती है)
शैली .pressable() — — दबाए जाने का हाइलाइट सक्षम करता है
शैली .textAlign(Position, Position) Position थीम सामग्री का संरेखण
शैली .autoWidth(Relative) / .autoHeight(Relative) Relative — पसंदीदा आकार तय करता है
getAutoWidth() / getAutoHeight(int) int — सामग्री के अनुसार पसंदीदा आकार

कॉलबैक और इवेंट

कॉलबैक कब ट्रिगर होता है
onAction(Action) क्लिक पूरा होने पर (touch-up), runActions() के माध्यम से। this लौटाता है, जिससे चेनिंग संभव होती है (new Button(...).onAction(...).style(...))।

Action c -> { ... } है, जहाँ c मूल Component है; यह Exception फेंक सकता है।

अवस्थाएँ

  • pressed: दबाए जाने के दौरान, ButtonStyle दबाव शैली लागू करता है (fade के साथ)। शैली में pressable() आवश्यक है।
  • disabled: setEnabled(false) अक्षम दिखावट लागू करता है और टैप को अनदेखा करता है।

टेक्स्ट के दाईं ओर आइकन वाला बटन

Button proximo = new Button(
   "Próximo", new MaterialIcon(""), TextPos.TEXT_AT_RIGHT);
container.add(LAY_AUTO, proximo);

“लिंक” शैली का बटन जो फ़ील्ड साफ़ करता है

Button clear = new Button("Clear").style(
   Styles.theme().button(ButtonRole.LINK, State.NORMAL)
      .pressable()
      .textAlign(Position.CENTER, Position.CENTER));
clear.onAction(c -> {
   nome.clearText();
   email.clearText();
});
container.add(LAY_AUTO, clear);

अच्छे तरीके

  • जब बटन में टेक्स्ट और आइकन दोनों हों तो हमेशा textPos पास करें (अन्यथा वे आरोपित हो जाते हैं)।
  • दृश्य संगति के लिए थीम भूमिकाओं (ButtonRole.PRIMARY/SECONDARY/LINK) का उपयोग करें।
  • बटनों में अंतर देने के लिए, Gap या ingap/outgap/लेआउट के अंश का उपयोग करें — Spacer हटा दिया गया था (देखें spacing.md)।

सामान्य गलतियाँ

  • textPos के बिना text + icon: परिणाम आरोपित हो जाता है (null = NONE का व्यवहार)।
  • onTouchDown में ट्रिगर की अपेक्षा करना: क्रिया मानक क्लिक प्रवाह (touch-up) में ट्रिगर होती है।

यह भी देखें

  • क्षेत्र गाइड: ui/ · रेसिपी: cookbook/
  • अवधारणा (घटक मॉडल / onAction): concepts/
  • संबंधित घटक: Label · ImageView
क्या यह पृष्ठ उपयोगी था?