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

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

4. Layouts

आप क्या सीखेंगे: CrossFly कैसे स्थान निर्धारित करता है, और वास्तविक स्क्रीन बनाने के लिए layouts को नेस्ट करने की तकनीक। पूर्वापेक्षाएँ: कॉम्पोनेंट्स में सोचना।

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

सूची स्क्रीन की निश्चित संरचना, layouts को नेस्ट करते हुए: HorizontalLayout में header (auto ऊँचाई), LAY_FILL के साथ लचीली सामग्री और auto footer — सब कुछ एक VerticalLayout में। जैसा है वैसा ही compile होता है।

package com.exemplo;

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

public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout(Position.START, Position.START));

      // header: HorizontalLayout, प्राकृतिक ऊंचाई (LAY_AUTO)
      Component header = new Component();
      header.setLayout(new HorizontalLayout(Position.START, Position.CENTER));
      header.add(LAY_AUTO, new Button(new MaterialIcon("")));   // आइकन
      header.add(LAY_FILL, new Label("Minhas tarefas"));         // शीर्षक चौड़ाई सोखता है
      add(LAY_AUTO, header);

      // सामग्री: "इलास्टिक" — शेष ऊंचाई सोखता है
      Component conteudo = new Component();
      conteudo.setLayout(new VerticalLayout());
      conteudo.add(LAY_AUTO, new Label("Item 1"));
      conteudo.add(LAY_AUTO, new Label("Item 2"));
      conteudo.add(LAY_AUTO, new Label("Item 3"));
      add(LAY_FILL, conteudo);

      // फुटर: प्राकृतिक ऊंचाई
      add(LAY_AUTO, new Button("Adicionar"));
   }
}

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

छह layouts

Layout किसके लिए
VerticalLayout / HorizontalLayout ↓ खड़ी तह लगाना / → अगल-बगल
GridLayout भिन्न के अनुसार ग्रिड (चौड़ाइयाँ, फिर कॉम्पोनेंट्स)
RelativeLayout एक कॉम्पोनेंट को दूसरे से एंकर करना
EvenlySpacedLayout समान रूप से अंतराल देना
RandomLayout मुक्त स्थिति (overlays)

add(आकार, comp) — तीन मामले

add(LAY_AUTO, comp);   //  0f → सामग्री का प्राकृतिक आकार
add(LAY_FILL, comp);   // -1f → शेष स्थान भरता है ("इलास्टिक")
add(0.3f, comp);       // >0  → container के आयाम का 30%

मुख्य तकनीक: layouts को नेस्ट करना

वास्तविक स्क्रीन अलग-अलग layouts वाले containers को संयोजित करके बनती हैं। HorizontalLayout में header (auto), LAY_FILL में सामग्री, सब कुछ एक VerticalLayout में:

setLayout(new VerticalLayout(Position.START, Position.START));

Component header = new Component();
header.setLayout(new HorizontalLayout(Position.START, Position.CENTER));
header.add(LAY_AUTO, new Button(new MaterialIcon("")));   // आइकन
header.add(LAY_FILL, new Label("Minhas tarefas"));         // शीर्षक चौड़ाई सोखता है
add(LAY_AUTO, header);                                      // header: प्राकृतिक ऊंचाई

add(LAY_FILL, new VirtualListView(Relative.ofFont(3f), adapter));   // सूची: ऊंचाई सोखती है

इस चरण में क्या बनाया जाता है

सूची स्क्रीन की निश्चित संरचना: header (auto) + सूची (LAY_FILL) + footer।

पुनरावलोकन

add(0f|-1f|भिन्न, comp); प्रति अक्ष एक LAY_FILL लचीला तत्व है; वास्तविक स्क्रीन के लिए layouts को नेस्ट करें।

अगले कदम

→ शैलियाँ और थीम

यह भी देखें

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