विज़ुअल डिज़ाइनर: ड्रैग और ड्रॉप से इंटरफ़ेस बनाएँ

विज़ुअल डिज़ाइनर Pocket Code की सबसे शक्तिशाली सुविधाओं में से एक है। यह आपको यूज़र इंटरफ़ेस को विज़ुअल तरीके से बनाने देता है और अपने आप साफ़-सुथरा, प्रोडक्शन-तैयार कोड उत्पन्न करता है।

विज़ुअल डिज़ाइनर क्यों?

फ़ोन की स्क्रीन पर UI डिज़ाइन करना चुनौतीपूर्ण हो सकता है। छोटी स्क्रीन पर मैन्युअल रूप से लेआउट कोड लिखना धीमा और त्रुटि-प्रवण होता है। विज़ुअल डिज़ाइनर इसे एक सहज ड्रैग और ड्रॉप इंटरफ़ेस के साथ हल करता है।

फ़ायदे

• गति: घंटों में नहीं, मिनटों में डिज़ाइन करें
• विज़ुअल: परिणाम को रियल-टाइम में देखें
• साफ़ कोड: सर्वोत्तम तरीकों का पालन करते हुए कोड उत्पन्न करता है
• मल्टी-फ़्रेमवर्क: React, Flutter, नेटिव Android

शुरुआत करना

डिज़ाइनर खोलें

1. किसी भी प्रोजेक्ट में, टैब बार में Design आइकन पर टैप करें
2. फ़्रेमवर्क चुनें (React, Flutter, XML)
3. खाली कैनवास से शुरू करें या कोई टेम्पलेट चुनें

बुनियादी इंटरफ़ेस

डिज़ाइनर इन हिस्सों में बँटा है:

• कंपोनेंट पैनल (बाएँ) — ड्रैग किए जा सकने वाले एलिमेंट
• कैनवास (बीच में) — आपका डिज़ाइन क्षेत्र
• प्रॉपर्टीज़ (दाएँ) — चयनित एलिमेंट को अनुकूलित करें

उपलब्ध कंपोनेंट

लेआउट

कंपोनेंट	विवरण
Container	लचीला कंटेनर
Row	क्षैतिज एलिमेंट
Column	ऊर्ध्वाधर एलिमेंट
Grid	CSS Grid लेआउट
Stack	ओवरलैपिंग एलिमेंट
Scroll	स्क्रॉल योग्य क्षेत्र

इनपुट

कंपोनेंट	विवरण
Button	वैरिएंट वाला बटन
TextInput	टेक्स्ट फ़ील्ड
Toggle	चालू/बंद स्विच
Slider	मान चयनकर्ता
Dropdown	ड्रॉपडाउन मेन्यू
Checkbox	चेकबॉक्स
RadioGroup	रेडियो विकल्प

डिस्प्ले

कंपोनेंट	विवरण
Text	शैलियों वाला टेक्स्ट
Image	छवियाँ/आइकन
Card	जानकारी कार्ड
List	डायनामिक सूची
Badge	सूचना बैज
Avatar	प्रोफ़ाइल छवि
Divider	विज़ुअल विभाजक

नेविगेशन

कंपोनेंट	विवरण
NavBar	शीर्ष नेविगेशन बार
TabBar	टैब नेविगेशन
Drawer	साइड मेन्यू
BottomNav	निचला नेविगेशन
Breadcrumb	श्रेणीबद्ध नेविगेशन

व्यावहारिक ट्यूटोरियल: लॉगिन स्क्रीन

आइए चरण-दर-चरण एक पूर्ण लॉगिन स्क्रीन बनाएँ:

चरण 1: बुनियादी संरचना

कैनवास पर एक Column ड्रैग करें और कॉन्फ़िगर करें:

• संरेखण: केंद्र
• पैडिंग: 24px
• पृष्ठभूमि: #0a0a0a

चरण 2: लोगो जोड़ें

कॉलम के अंदर, एक Image ड्रैग करें:

• आकार: 120x120
• बॉर्डर-रेडियस: full (वृत्त)
• मार्जिन-बॉटम: 32px

चरण 3: टेक्स्ट फ़ील्ड

दो TextInput कंपोनेंट जोड़ें:

ईमेल:

• प्लेसहोल्डर: "Email"
• प्रकार: email
• आइकन: mail
• चौड़ाई: 100%

पासवर्ड:

• प्लेसहोल्डर: "Password"
• प्रकार: password
• आइकन: lock
• चौड़ाई: 100%

चरण 4: लॉगिन बटन

एक Button ड्रैग करें:

• टेक्स्ट: "Log In"
• वैरिएंट: primary
• चौड़ाई: 100%
• बॉर्डर-रेडियस: 12px

चरण 5: अतिरिक्त लिंक

इनके लिए Text कंपोनेंट जोड़ें:

• "Forgot your password?" (लिंक शैली)
• "Don't have an account? Sign up" (मंद टेक्स्ट + लिंक)

उत्पन्न कोड

डिज़ाइनर अपने आप साफ़-सुथरा कोड तैयार करता है:

// React output
export function LoginScreen() {
	const [email, setEmail] = useState("");
	const [password, setPassword] = useState("");

	return (
		<div className="flex flex-col items-center justify-center min-h-screen bg-neutral-950 p-6">
			<img src="/logo.png" alt="Logo" className="w-30 h-30 rounded-full mb-8" />

			<input
				type="email"
				placeholder="Email"
				value={email}
				onChange={(e) => setEmail(e.target.value)}
				className="w-full p-3 mb-4 bg-neutral-900 rounded-xl
                   border border-neutral-800 text-white"
			/>

			<input
				type="password"
				placeholder="Password"
				value={password}
				onChange={(e) => setPassword(e.target.value)}
				className="w-full p-3 mb-6 bg-neutral-900 rounded-xl
                   border border-neutral-800 text-white"
			/>

			<button
				className="w-full p-3 bg-blue-600 rounded-xl
                          text-white font-semibold hover:bg-blue-700"
			>
				Log In
			</button>

			<p className="mt-4 text-neutral-500 text-sm">
				Don't have an account? <span className="text-blue-400">Sign up</span>
			</p>
		</div>
	);
}

// Flutter output
class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  final emailController = TextEditingController();
  final passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFF0A0A0A),
      body: Center(
        child: Padding(
          padding: EdgeInsets.all(24),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CircleAvatar(
                radius: 60,
                backgroundImage: AssetImage('assets/logo.png'),
              ),
              SizedBox(height: 32),
              TextField(
                controller: emailController,
                decoration: InputDecoration(
                  hintText: 'Email',
                  prefixIcon: Icon(Icons.mail),
                ),
              ),
              SizedBox(height: 16),
              TextField(
                controller: passwordController,
                obscureText: true,
                decoration: InputDecoration(
                  hintText: 'Password',
                  prefixIcon: Icon(Icons.lock),
                ),
              ),
              SizedBox(height: 24),
              ElevatedButton(
                onPressed: () {},
                child: Text('Log In'),
                style: ElevatedButton.styleFrom(
                  minimumSize: Size(double.infinity, 48),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

उन्नत सुविधाएँ

रिस्पॉन्सिव डिज़ाइन

डिज़ाइनर अपने आप रिस्पॉन्सिवनेस को संभालता है:

• ऑटो-लेआउट: एलिमेंट स्क्रीन आकार के अनुसार समायोजित होते हैं
• ब्रेकपॉइंट: मोबाइल/टैबलेट के लिए अलग-अलग व्यवस्थाएँ परिभाषित करें
• सापेक्ष इकाइयाँ: स्थिर पिक्सेल के बजाय %, rem और flex का उपयोग करता है

डेटा बाइंडिंग

कंपोनेंट को डेटा से जोड़ें:

1. एक कंपोनेंट चुनें (उदा. एक List)
2. प्रॉपर्टीज़ में, Bind Data पर टैप करें
3. स्रोत चुनें (API, स्थानीय स्टेट, mock)
4. फ़ील्ड को कंपोनेंट प्रॉपर्टीज़ से मैप करें

पुन: प्रयोज्य टेम्पलेट

अपने डिज़ाइन को टेम्पलेट के रूप में सहेजें:

• कस्टम कंपोनेंट: संयोजनों को एकल कंपोनेंट के रूप में सहेजें
• डिज़ाइन सिस्टम: रंग, टाइपोग्राफ़ी और स्पेसिंग परिभाषित करें
• स्क्रीन टेम्पलेट: टीम के साथ पूर्ण लेआउट साझा करें

जेस्चर समर्थन

डिज़ाइनर टच इंटरैक्शन के लिए बनाया गया है:

• कैनवास पर पिंच टू ज़ूम
• नेस्टेड एलिमेंट चुनने के लिए डबल-टैप
• कॉन्टेक्स्टुअल मेन्यू के लिए लॉन्ग-प्रेस
• पैनल के बीच जाने के लिए स्वाइप

समर्थित फ़्रेमवर्क

फ़्रेमवर्क	स्थिति	कोड गुणवत्ता
React/JSX	✅ स्थिर	उत्कृष्ट
Flutter	✅ स्थिर	उत्कृष्ट
Android XML	✅ स्थिर	बहुत अच्छा
SwiftUI	🔄 बीटा	अच्छा
Vue	📋 नियोजित	—

सुझाव और सर्वोत्तम तरीके

1. संरचना से शुरू करें: सामग्री से पहले कंटेनर रखें
2. ऑटो-लेआउट का उपयोग करें: जब भी संभव हो स्थिर आकारों से बचें
3. अपने कंपोनेंट को नाम दें: अधिक पठनीय कोड उत्पन्न करता है
4. बार-बार पूर्वावलोकन करें: विभिन्न स्क्रीन आकारों पर जाँचें
5. क्रमिक रूप से निर्यात करें: कोड जाँचने के लिए अंत तक प्रतीक्षा न करें

आगे क्या है

• Figma आयात: डिज़ाइन सीधे Figma से लाएँ
• सहयोगी मोड: टीमों में रियल-टाइम में डिज़ाइन करें
• AI डिज़ाइनर: UI को प्राकृतिक भाषा में बताएँ और AI को इसे बनाने दें
• एनिमेशन एडिटर: विज़ुअल तरीके से ट्रांज़िशन और एनिमेशन जोड़ें

---

विज़ुअल डिज़ाइनर Pocket Code को एकमात्र मोबाइल IDE बनाता है जहाँ आप एक ही डिवाइस से डिज़ाइन और प्रोग्राम दोनों कर सकते हैं। आज ही इसे आज़माएँ और अपने विकास को तेज़ करें!