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

यह दस्तावेज़ फ़िलहाल पुर्तगाली में उपलब्ध है। अन्य भाषाओं में अनुवाद जल्द ही आ रहा है।

UI — इंटरफ़ेस बनाना

UI — इंटरफ़ेस बनाना

CrossFly में स्क्रीन बनाने के लिए गाइड + रेफ़रेंस: widgets, लेआउट, नेविगेशन, थीम, एनिमेशन, इमेज/ग्राफ़िक्स और फ़ॉर्म।

स्क्रीन पर कंपोनेंट कैसे सजाएँ — ग्रिड, वर्टिकल, हॉरिज़ॉन्टल और रिस्पॉन्सिवनेस, हर पेज पर एक लेआउट।

संदर्भ
EvenlySpacedLayout

बच्चों को एक अक्ष पर समान अंतराल के साथ वितरित करता है, प्रत्येक का आकार संरक्षित रखते हुए।

संदर्भ
GridLayout

भिन्न द्वारा स्तंभों का ग्रिड, सबसे ऊँची सामग्री के अनुसार एक पंक्ति की ऊँचाई।

संदर्भ
HorizontalLayout

बच्चों को अगल-बगल रखता है, प्रत्येक को कंटेनर की ऊँचाई में।

संदर्भ
RandomLayout

कोई स्वचालित व्यवस्था नहीं — मैनुअल (setBounds) या सापेक्ष (setRelativeBounds) स्थिति।

संदर्भ
RelativeLayout

एंकरों द्वारा स्थिति और आकार निर्धारित करता है — कंटेनर के सापेक्ष या दूसरे घटक के सापेक्ष।

कैसे करें
उत्तरदायित्व

यह कैसे सुनिश्चित करें कि कोई भी लेआउट स्क्रीन आकार, घनत्व और फ़ॉन्ट के अनुकूल हो।

संदर्भ
VerticalLayout

बच्चों को ऊपर से नीचे ढेर करता है, प्रत्येक को कंटेनर की चौड़ाई में।

विंडो, नेविगेशन स्टैक और डायलॉग: स्क्रीन खोलना, बंद करना और एक से दूसरी में मान लौटाना।

व्याख्या
विंडो स्टैक

नेविगेशन के पीछे का मॉडल — EventsProcessor का स्टैक, popup बनाम fullscreen, Back बटन और ट्रांज़िशन।

कैसे करें
डायलॉग और मोडल

Alert, ActionSheet और Hint — कैसे खोलें, जवाब पाएँ और दिखावट कॉन्फ़िगर करें।

कैसे करें
स्क्रीनों के बीच नेविगेट करना

स्क्रीनों के बीच आगे बढ़ना और वापस जाना (push/pop) और गंतव्य स्क्रीन को डेटा भेजना।

कैसे करें
स्क्रीन से मान लौटाना

वापस परिणाम कैसे प्राप्त करें — कॉलबैक पैटर्न और Picker/onAnswer पैटर्न।

टेक्स्ट फ़ील्ड, मास्क, कीबोर्ड, फ़ोकस, और फ़ॉर्म में लिखे मानों को पढ़ना और जाँचना।

कैसे करें
टेक्स्ट क्षेत्र

TextArea — बहु-पंक्ति इनपुट, स्क्रॉलिंग और प्रति-पंक्ति आइकन।

कैसे करें
टेक्स्ट फ़ील्ड

TextField — फ़्लोटिंग कैप्शन, आइकन, टॉगल के साथ पासवर्ड और मान पढ़ना।

कैसे करें
फ़ोकस और मान्यता

फ़ोकस नियंत्रण (focusOnTouch/focusOnKey), संपादन योग्य, सीमाएँ और भेजते समय मान्यता।

कैसे करें
मास्क और कीबोर्ड

EditMode (तिथि/समय/मुद्रा), '9' के साथ मास्क, नेटिव कीबोर्ड और अंतर्निहित Keypad।

रंग, लाइट-डार्क थीम और स्किन — CrossFly की दिखावट की तीन परतें और हर एक कब काम आती है।

कैसे करें
रंग योजनाएँ

ColorScheme — एक बीज-रंग से पूरे ऐप की पैलेट उत्पन्न करें (Material 3)।

कैसे करें
कॉम्पोनेंट स्टाइल करना

ComponentStyle — किसी कॉम्पोनेंट के रंग, बॉर्डर, कोनों, गैप, फ़ॉन्ट और शैडो के लिए फ़्लुएंट API।

कैसे करें
हल्का/गहरा मोड

UI को फिर से बनाए बिना रीयल-टाइम में थीम बदलें — setDarkMode + onRestyle/styled/restyle।

कैसे करें
Skins (Material / iOS / Flutter)

विज़ुअल पहचान बदलें — संरचना, आकार और रिक्ति — वैश्विक रूप से या प्रति कॉम्पोनेंट।

ट्रांज़िशन और विज़ुअल फ़ीडबैक: अल्फ़ा, पोज़िशन और लूप ऐनिमेटर, साथ में स्क्रीन ट्रांज़िशन।

ImageView से इमेज दिखाना, Whiteboard पर मुक्त हाथ से बनाना और Paint से कस्टम ड्रॉइंग।

CrossFly के विज़ुअल कंपोनेंट्स की सूची: बटन, फ़ील्ड, पिकर, अलर्ट और सिलेक्टर, हर एक उदाहरण के साथ।

संदर्भ
ActionSheet

स्क्रीन के आधार पर एंकर की गई iOS-शैली की एक्शन शीट।

संदर्भ
Alert

शीर्षक, संदेश और एक्शन बटनों वाला मोडल डायलॉग बॉक्स।

संदर्भ
BarcodePicker

कैमरा द्वारा बारकोड/QR कोड की रीडिंग (अमूर्त वर्ग)।

संदर्भ
Button

क्लिक करने योग्य बटन जो टेक्स्ट और/या आइकन दिखाता है, दबाए जाने की अवस्था और onAction के साथ।

संदर्भ
Charts (ChartView)

चार्ट — लाइन, एरिया, बार, स्टैक्ड बार/एरिया, पाई, डोनट और कॉम्बो — एक साझा रेंडर कोर के साथ।

संदर्भ
ColorPicker

रंग (hue) × संतृप्ति (saturation) मैट्रिक्स + चमक स्लाइडर द्वारा रंग का चयन।

संदर्भ
DatePicker

मासिक कैलेंडर में तारीख का चयन — वैकल्पिक अनुमत सीमा के साथ, और चुना गया दिन वापस मिलता है।

संदर्भ
Dropdown

ComboBox — तीर वाला बटन जो एकल चयन के लिए एक सूची खोलता है।

संदर्भ
अंतराल (Gap)

Spacer के बिना कॉम्पोनेंट के बीच अंतर कैसे बनाएं — Gap, ingap/outgap और लेआउट भिन्नों का उपयोग करके।

संदर्भ
FilePicker

आरक्षित — 2026 API में खाली ढांचा (कोई परिणाम नहीं देता)।

संदर्भ
Group

तार्किक रजिस्टर जो Options/Switches को परस्पर अनन्य (radio) बनाता है।

संदर्भ
Hint

क्षणिक, नॉन-मोडल सूचना — Toast और ToolTip की जगह, जो अपने आप दिखकर अपने आप हट जाती है।

संदर्भ
ImageView

कॉन्फ़िगर करने योग्य स्केल मोड (ImageSize) और संरेखण के साथ एक Image प्रदर्शित करता है।

संदर्भ
Keypad

संख्यात्मक कीबोर्ड/कैलकुलेटर विंडो जो फ़ोकस में एक TextField से जुड़ती है।

संदर्भ
Label

पाठ (word-wrap के साथ) और/या read-only आइकन प्रदर्शित करने के लिए गैर-इंटरैक्टिव कॉम्पोनेंट।

संदर्भ
LabelItem और CheckLabelItem

तैयार सूची-आइटम कार्ड — केवल लेबल (SINGLE) या चेकबॉक्स + लेबल (MULTIPLE)।

संदर्भ
ListView

एकल या बहु चयन के साथ, स्क्रॉल करने योग्य और एम्बेड करने योग्य टेक्स्ट आइटम की सूची।

संदर्भ
ListViewWindow

मोडल पॉपअप जो किसी ListView को एक Window में लपेटकर तैरती हुई विंडो में चयन प्रदान करता है।

संदर्भ
LocationPicker

GPS वाले मानचित्र पर भौगोलिक निर्देशांक चुनें — अक्षांश और देशांतर कॉल करने वाले को लौटाए जाते हैं।

संदर्भ
LocationView

GPS निर्देशांक (lat, lon, fix का समय, गति, दिशा) को टेक्स्ट के रूप में प्रदर्शित करता है, समय-समय पर अपडेट होता है।

संदर्भ
Option

एनिमेटेड क्रॉसफेड वाला चेकबॉक्स/रेडियो — अकेला चेकबॉक्स, Group में रेडियो।

संदर्भ
PagedDataAdapter

VirtualListView के लिए पेजिनेटेड DataAdapter, पेजों के LRU कैश और असिंक्रोनस लोडिंग के साथ।

संदर्भ
PhotoPicker

डिवाइस के कैमरे से फ़ोटो या वीडियो कैप्चर करें — बने हुए फ़ाइल का पथ वापस मिलता है।

संदर्भ
Picker (आधार वर्ग)

सभी pickers का आधार — getAnswer() + show(onAnswer) पैटर्न।

संदर्भ
Progress

प्रगति संकेतक — निर्धारित बार, अनंत एनिमेशन या घूमता हुआ आइकन।

संदर्भ
Slider

किसी अंतराल में एक float मान का चयन, निरंतर या चरणों में।

संदर्भ
Switch

एनिमेटेड स्लाइडिंग ट्रैक और वैकल्पिक लेबल वाला on/off स्विच।

संदर्भ
TabBar

एनिमेटेड संकेतक और प्रति-पृष्ठ snap के साथ क्षैतिज रूप से रोलेबल सामग्री वाली टैब बार।

संदर्भ
TextArea

word-wrap, ऊर्ध्वाधर रोलिंग, प्रति-पंक्ति आइकन और रोलेबल read-only मोड वाला बहुपंक्ति टेक्स्ट फ़ील्ड।

संदर्भ
TextField

मास्क, EditMode, पासवर्ड मोड, क्लिक करने योग्य आइकन और फ़्लोटिंग caption वाला एक-पंक्ति टेक्स्ट फ़ील्ड।

संदर्भ
TextInput

टेक्स्ट प्रविष्टि का अमूर्त आधार — cursor, चयन, clipboard, फ़ोकस और कीबोर्ड, TextField और TextArea में समान।

संदर्भ
TimePicker

एनालॉग घड़ी या ग्रिड के ज़रिए घंटा और मिनट का चयन।

संदर्भ
VirtualListView

उच्च-प्रदर्शन वाली वर्चुअलाइज़्ड सूची जो घटकों को रीसायकल करती है, RecyclerView की शैली में।

संदर्भ
WebContainer

UI के अंदर एक नेटिव webview (HTML/JS) को एम्बेड करता है — IWebView इंटरफ़ेस के माध्यम से, प्लेटफ़ॉर्म-निर्भर।

संदर्भ
Whiteboard

मुक्त हस्त-चित्रण सतह, चिकने स्ट्रोक, कॉन्फ़िगर करने योग्य रंग और मोटाई के साथ।