लिपटने में wra_content और match_parent के बराबर?

Question

एंड्रॉइड में match_parentऔर wrap_contentअपने माता-पिता के सापेक्ष विजेट को आकार देने के लिए उपयोग किया जाता है, जिसमें विजेट शामिल है।

स्पंदन में यह डिफ़ॉल्ट रूप से लगता है कि सभी विगेट्स सेट हैं wrap_content, मैं इसे कैसे बदलूंगा ताकि मैं इसे widthऔर heightइसके माता-पिता को भर सकूं?

Answer 1

आप छोटी चाल के साथ कर सकते हैं: मान लीजिए कि आपको इसकी आवश्यकता है: (चौड़ाई, ऊँचाई)

Wrap_content, Wrap_content:

 //use this as child
 Wrap(
  children: <Widget>[*your_child*])

Match_parent, Match_parent:

 //use this as child
Container(
        height: double.infinity,
    width: double.infinity,child:*your_child*)

Match_parent, Wrap_content:

 //use this as child
Row(
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[*your_child*],
);

Wrap_content, Match_parent:

 //use this as child
Column(
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[your_child],
);

Comments

माता-पिता से मेल खाने के लिए आप अपने विजेट्स को SizedBox.expand ()

— Wecherowski

Answer 2

आदेश के लिए व्यवहार प्राप्त करने के लिए match_parent और wrap_content हम उपयोग करने की आवश्यकता mainAxisSize में संपत्ति पंक्ति / स्तंभ विजेट, mainAxisSize संपत्ति लेता MainAxisSize दो मानों जो होने enum MainAxisSize.min जो के रूप में बर्ताव करता है wrap_content और MainAxisSize.max जो के रूप में बर्ताव करता है match_parent ।

मूल लेख का लिंक

Comments

मुझे लगता है कि वहाँ भी crossAxisAlignmentपंक्तियों और स्तंभों पर क्षेत्र है कि CrossAxisAlignment.stretchक्षैतिज उदाहरण के लिए एक स्तंभ के भीतर विस्तार करने के लिए सेट किया जा सकता है

— wamfous

आपका बहुत बहुत धन्यवाद! मैंने पिछले साल मतदान किया था, तब मैंने लंबे समय तक फड़फड़ाया नहीं था और लगभग सब कुछ भूल गया था, और आपने आज फिर से मेरी मदद की।

— चैंडलर

Answer 3

संक्षिप्त उत्तर यह है कि माता-पिता के पास तब तक आकार नहीं है जब तक कि बच्चे का आकार नहीं होता है।

जिस तरह से फ़्लटर में काम करता है वह यह है कि प्रत्येक विजेट अपने प्रत्येक बच्चे को बाधाएं प्रदान करता है, जैसे "आप इस चौड़े तक हो सकते हैं, आपको यह लंबा होना चाहिए, आपको कम से कम यह चौड़ा होना चाहिए", या जो भी (विशेष रूप से, वे) एक न्यूनतम चौड़ाई, एक अधिकतम चौड़ाई, एक न्यूनतम ऊंचाई और एक अधिकतम ऊंचाई प्राप्त करें)। प्रत्येक बच्चा उन बाधाओं को लेता है, कुछ करता है, और एक आकार (चौड़ाई और ऊंचाई) चुनता है जो उन बाधाओं से मेल खाता है। फिर, एक बार प्रत्येक बच्चे ने अपनी बात की है, तो विजेट अपना आकार चुन सकता है।

कुछ विजेट माता-पिता की अनुमति के रूप में बड़े होने की कोशिश करते हैं। कुछ विजेट माता-पिता की अनुमति के रूप में छोटे होने की कोशिश करते हैं। कुछ विगेट्स एक निश्चित "प्राकृतिक" आकार (जैसे पाठ, चित्र) से मेल खाने की कोशिश करते हैं।

कुछ विगेट्स अपने बच्चों को बताते हैं कि वे किसी भी आकार के हो सकते हैं जो वे चाहते हैं। कुछ अपने बच्चों को वही अड़चन देते हैं जो उन्हें अपने माता-पिता से मिलती है।

Comments

इयान, जब मेरे पास एक PageViewअंदर होता है Column, तो दूसरे के Columnअंदर वर्तमान के साथ page, मुझे एक प्रतिपादन त्रुटि मिलती है, लेकिन मैं इसे PageViewअंदर Expandedया एक लपेटकर ठीक कर सकता हूं Flexible। समस्या यह है कि उन 2 विकल्पों में केवल उनके बच्चे का विस्तार है। इस तरह के रेंडरिंग मुद्दों को हल करने के लिए "रैप कंटेंट" की तरह फिट होने के लिए संबंधित विजेट क्यों नहीं है?

— मिशेल फ़िनस्टीन

Answer 4

वास्तव में कुछ विकल्प उपलब्ध हैं:

आप अपने विजेट मैच माता-पिता के आयाम बनाने के लिए SizedBox.expand का उपयोग कर सकते हैं, या केवल आकार की मिलान करने के लिए केवल चौड़ाई या SizedBox (heigth: double.infinity) से मिलान करने के लिए SizedBox (चौड़ाई: double.infinity) का उपयोग कर सकते हैं।

यदि आप एक रैप_ कॉन्टेंट व्यवहार चाहते हैं, तो यह आपके द्वारा उपयोग किए जा रहे पैरेंट विजेट पर निर्भर करता है, उदाहरण के लिए यदि आप किसी कॉलम पर एक बटन लगाते हैं तो यह रैप_ कॉन्टेंट की तरह व्यवहार करेगा और इसे मैच_परेंट की तरह उपयोग करने के लिए आप एक्सपेंडेबल विजेट या साइज़बॉक्स के साथ बटन को लपेट सकते हैं।

एक ListView बटन के साथ एक match_parent व्यवहार मिलता है और एक wra_content व्यवहार प्राप्त करने के लिए आप इसे Row जैसे फ्लेक्स विजेट से लपेट सकते हैं।

विस्तारित विजेट का उपयोग करने से मुख्य अक्ष में उपलब्ध स्थान को भरने के लिए पंक्ति, कॉलम या फ्लेक्स का एक बच्चा हो जाता है (जैसे, क्षैतिज रूप से पंक्ति के लिए या लंबवत रूप से स्तंभ के लिए)। https://docs.flutter.io/flutter/widgets/Expanded-class.html

लचीले विजेट का उपयोग करने से रो, कॉलम, या फ्लेक्स के एक बच्चे को मुख्य अक्ष में उपलब्ध स्थान को भरने के लिए लचीलेपन का विस्तार मिलता है (जैसे, क्षैतिज रूप से पंक्ति के लिए या लंबवत रूप से कॉलम के लिए), लेकिन, इसके विपरीत विस्तारित, लचीले नहीं उपलब्ध स्थान को भरने के लिए बच्चे की आवश्यकता होती है। https://docs.flutter.io/flutter/widgets/Flexible-class.html

Answer 5

एक सरल उपाय:

यदि कंटेनर में केवल एक शीर्ष स्तर का बच्चा है, तो आप बच्चे के लिए संरेखण संपत्ति निर्दिष्ट कर सकते हैं और उसे कोई भी उपलब्ध मूल्य दे सकते हैं। यह कंटेनर में सभी जगह भर देगा।

Container(color:Colors.white,height:200.0,width:200.0,
 child:Container(
    color: Colors.yellow,
    alignment:Alignment.[any_available_option] // make the yellow child match the parent size
   )
)

दूसरा रास्ता:

Container(color:Colors.white,height:200.0,width:200.0,
 child:Container(
    color: Colors.yellow,
    constraints:  BoxConstraints.expand(height: 100.0), // height will be 100 dip and width will be match parent
   )
)

Comments

BoxConstraints.expand(height: 100.0)एंड्रॉइड के width="match_parent"समतुल्य के रूप में महान काम करता है

— कोसियारा - बार्टोज़ कोसार्की

Answer 6

मैंने इस समाधान का उपयोग किया है, आपको MediaQuery का उपयोग करके अपनी स्क्रीन की ऊंचाई और चौड़ाई को परिभाषित करना है:

 Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width
  )

Answer 7

Stack(
  children: [
    Container(color:Colors.red, height:200.0, width:200.0),
    Positioned.fill(
      child: Container(color: Colors. yellow),
    )
  ]
),

Comments

हालाँकि आपका कोड प्रश्न का उत्तर दे सकता है, लेकिन एक अच्छे उत्तर को हमेशा यह स्पष्ट करना चाहिए कि कोड क्या करता है और यह समस्या को हल कैसे करता है।

— BDL

यह सामग्री लपेटने का उत्तर नहीं है। यह केवल कठिन कोडित चौड़ाई और ऊंचाई है।

— Developine

Answer 8

विजेट का उपयोग करें Wrap।

के लिए Columnकी तरह व्यवहार कोशिश:

  return Wrap(
          direction: Axis.vertical,
          spacing: 10,
          children: <Widget>[...],);

के लिए Rowकी तरह व्यवहार कोशिश:

  return Wrap(
          direction: Axis.horizontal,
          spacing: 10,
          children: <Widget>[...],);

अधिक जानकारी के लिए: लपेटें (स्पंदन विजेट)

Answer 9

कॉलम के अंदर कोड्स की इस लाइन का उपयोग करें। Wra_content के लिए: mainAxisSize: MainAxisSize.min match_parent के लिए:mainAxisSize: MainAxisSize.max

Answer 10

ऐसा करने के लिए वास्तव में एक बहुत आसान और साफ तरीका है।

FractionallySizedBoxविजेट का उपयोग करें ।

FractionallySizedBox(
  widthFactor: 1.0, // width w.r.t to parent
  heightFactor: 1.0,  // height w.r.t to parent
  child: *Your Child Here*
}

यह विजेट भी बहुत उपयोगी है जब आप अपने बच्चे को उसके माता-पिता के आकार के एक अंश पर आकार देना चाहते हैं।

उदाहरण:

आप बच्चे को अपनी मूल का 50% चौड़ाई पर कब्जा करना चाहते हैं, प्रदान widthFactorके रूप में0.5

Answer 11

एक बच्चे को उसके माता-पिता को भरने के लिए, बस इसे एक FittedBox में लपेटें

    FittedBox(
     child: Image.asset('foo.png'),
     fit: BoxFit.fill,
   )