Flutter में किसी Column में ListView कैसे जोड़ें?

Question

मैं अपने फ़्लटर ऐप के लिए एक सरल लॉगिन पेज बनाने की कोशिश कर रहा हूं। मैंने सफलतापूर्वक TextFields और Login / Signin बटन बनाए हैं। मैं एक क्षैतिज सूची दृश्य जोड़ना चाहता हूं। जब मैं कोड चलाता हूं तो मेरे तत्व गायब हो जाते हैं, अगर मैं इसे बिना ListView के करता हूं, तो यह फिर से ठीक है। मैं इसे सही तरीके से कैसे कर सकता हूं?

return new MaterialApp(
        home: new Scaffold(
          appBar: new AppBar(
            title: new Text("Login / Signup"),
          ),
          body: new Container(
            child: new Center(
              child: new Column(
              mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  new TextField(
                    decoration: new InputDecoration(
                      hintText: "E M A I L    A D D R E S S"
                    ),
                  ),
                  new Padding(padding: new EdgeInsets.all(15.00)),
                  new TextField(obscureText: true,
                    decoration: new InputDecoration(
                      hintText: "P A S S W O R D"
                    ),
                    ),
                  new Padding(padding: new EdgeInsets.all(15.00)),
                  new TextField(decoration: new InputDecoration(
                    hintText: "U S E R N A M E"
                  ),),
                  new RaisedButton(onPressed: null,
                  child:  new Text("SIGNUP"),),
                  new Padding(padding: new EdgeInsets.all(15.00)),
                  new RaisedButton(onPressed: null,
                  child: new Text("LOGIN"),),
                  new Padding(padding: new EdgeInsets.all(15.00)),
                  new ListView(scrollDirection: Axis.horizontal,
                  children: <Widget>[
                    new RaisedButton(onPressed: null,
                    child: new Text("Facebook"),),
                    new Padding(padding: new EdgeInsets.all(5.00)),
                    new RaisedButton(onPressed: null,
                    child: new Text("Google"),)
                  ],)

                ],
              ),
            ),
            margin: new EdgeInsets.all(15.00),
          ),
        ),
      );

Answer 1

आप कंसोल आउटपुट की जांच कर सकते हैं। यह त्रुटि प्रिंट करता है:

प्रदर्शन के दौरान निम्नलिखित जोर दिया गया था (): क्षैतिज व्यूपोर्ट को निर्बाध ऊंचाई दी गई थी। व्यूअर अपने कंटेनर को भरने के लिए क्रॉस एक्सिस में विस्तार करते हैं और अपने बच्चों को क्रॉस एक्सिस में अपनी सीमा से मेल खाने के लिए विवश करते हैं। इस मामले में, एक क्षैतिज व्यूपोर्ट को असीमित स्थान दिया गया था जिसमें विस्तार करना था।

आपको अपनी क्षैतिज सूची में ऊंचाई की बाधा जोड़ने की आवश्यकता है। जैसे कंटेनर में ऊंचाई के साथ लपेटें:

Container(
  height: 44.0,
  child: ListView(
    scrollDirection: Axis.horizontal,
    children: <Widget>[
      RaisedButton(
        onPressed: null,
        child: Text("Facebook"),
      ),
      Padding(padding: EdgeInsets.all(5.00)),
      RaisedButton(
        onPressed: null,
        child: Text("Google"),
      )
    ],
  ),
)

Comments

अगले दो उत्तर एक और दो समाधान देते हैं और समझाते हैं कि क्या हो रहा है।

— पशूट

Answer 2

मुझे भी यह समस्या हुई है। मेरा समाधान Expandedअंतरिक्ष रहने के लिए विजेट का उपयोग है।

new Column(
  children: <Widget>[
    new Expanded(
      child: horizontalList,
    )
  ],
);

Comments

यह एक महान समाधान है क्योंकि यह सूची दृश्य के चर आकार ऊंचाइयों / चौड़ाई के लिए अनुमति देता है, जैसे कि जब आप चाहते हैं कि यह केवल शेष स्थान को ले जाए। यह आपको स्क्रीन के अलग-अलग आकार के लिए हिसाब करने की अनुमति देता है जब सटीक ऊँचाई / चौड़ाई जानना बहुत मुश्किल होता है।

— डैनियल एलन

यह स्वीकृत उत्तर होना चाहिए। यह समाधान मीडिया दृश्य से निपटने के लिए सूची दृश्य को बाकी स्क्रीन पर ले जाने की अनुमति देता है।

— टेरेंस पोंस

मैं यह जानने के लिए फ़्लटर में बहुत नया हूं कि यह क्यों काम करता है, लेकिन मुझे खुशी है कि यह करता है। धन्यवाद। एक गैर-विशेषज्ञ के लिए इस समस्या के मूल कारण को स्पष्ट करने के लिए स्पंदन के त्रुटि संदेश बहुत मददगार नहीं थे।

— देवदंके

धन्यवाद, आपका उत्तर मेरा समय बचाता है।

— लाइसैट जूलियस

Answer 3

त्रुटि का कारण:

Columnमुख्य अक्ष दिशा (ऊर्ध्वाधर अक्ष) में अधिकतम आकार तक फैलता है, और इसी तरह अधिकतम होता है ListView।

समाधान

तो, आप की ऊंचाई को कम करने की जरूरत है ListView। इसे करने के कई तरीके हैं, आप अपनी जरूरत के हिसाब से सबसे अच्छा सूट चुन सकते हैं।

---

1. यदि आप उपयोग के ListViewअंदर बची हुई सभी जगह लेने की अनुमति देना चाहते Columnहैं Expanded।

   Column(
     children: <Widget>[
       Expanded(
         child: ListView(...),
       )
     ],
   )
   

---

2. यदि आप अपने ListViewकुछ को सीमित करना चाहते हैं height, तो आप उपयोग कर सकते हैं SizedBox।

   Column(
     children: <Widget>[
       SizedBox(
         height: 200, // constrain height
         child: ListView(),
       )
     ],
   )
   

---

3. यदि आपका ListViewछोटा है, तो आप shrinkWrapउस पर संपत्ति की कोशिश कर सकते हैं।

   Column(
     children: <Widget>[
       ListView(
         shrinkWrap: true, // use it
       )
     ],
   )
   

Comments

मेरी ऊंचाई तय नहीं होनी चाहिए और अन्य जवाब मेरे लिए काम नहीं करते हैं = /

— डैनियल विलेला

@DanielVilela विकल्प 1 आपके लिए काम करना चाहिए। यदि कृपया इसे प्रश्न के रूप में पोस्ट न करें और यदि मैं उपलब्ध हूं तो मैं इसका उत्तर दे सकता हूं।

— CopsOnRoad

मुझे यह काम करने के लिए मिला है! धन्यवाद। मुझे कुछ रणनीतिक स्थानों पर एक विस्तारित () रखना था।

— डेनियल विलेला

धन्यवाद, मैं विस्तारित के बारे में नहीं सोचा था।

— गिल्वन आंद्रे

संकोचन के लिए धन्यवाद: लिस्ट व्यू में सच ()

— राणा हैदर

Answer 4

मेरे पास SingleChildScrollViewएक माता-पिता के रूप में है, और एक Columnविजेट और फिर अंतिम दृश्य विजेट को अंतिम बच्चे के रूप में देखें।

मेरे लिए कार्य सूची में इन गुणों को जोड़ना।

  physics: NeverScrollableScrollPhysics(),
  shrinkWrap: true,
  scrollDirection: Axis.vertical,

Answer 5

विस्तारित विजेट बढ़ जाती है यह आकार में उपलब्ध स्थान के साथ उतना ही हो सकता है क्योंकि ListView अनिवार्य रूप से एक अनंत ऊंचाई है यह एक त्रुटि का कारण होगा।

 Column(
  children: <Widget>[
    Flexible(
      child: ListView(...),
    )
  ],
)

यहां हमें फ्लेक्सिबल विजेट का उपयोग करना चाहिए क्योंकि यह केवल उस स्थान को ही लेगा, जहां से विस्तारित स्क्रीन को पूर्ण स्क्रीन पर प्रस्तुत करने के लिए पर्याप्त विजेट नहीं होने पर भी पूरी स्क्रीन लेनी होगी।

Answer 6

वास्तव में, जब आप डॉक्स पढ़ते हैं तो ListView विस्तृत विजेट के अंदर होना चाहिए ताकि यह काम कर सके।

  Widget build(BuildContext context) {
return Scaffold(
    body: Column(
  children: <Widget>[
    Align(
      child: PayableWidget(),
    ),
    Expanded(
      child: _myListView(context),
    )
  ],
));

}

Answer 7

जैसा कि ऊपर दूसरों ने उल्लेख किया है, विस्तारित के साथ लपेटें सूची समाधान है।

लेकिन जब आप नेस्टेड कॉलम से निपटते हैं, तो आपको अपने ListView को एक निश्चित ऊंचाई तक सीमित करने की आवश्यकता होगी (इस समस्या का सामना करना पड़ा)।

अगर किसी के पास कोई दूसरा उपाय है, तो टिप्पणी में उल्लेख करें या उत्तर जोड़ें।

उदाहरण

  SingleChildScrollView(
   child: Column(
     children: <Widget>[
       Image(image: ),//<< any widgets added
       SizedBox(),
       Column(
         children: <Widget>[
           Text('header'),  //<< any widgets added
            Expanded(child: 
            ListView.builder(
              //here your code
               scrollDirection: Axis.horizontal,
        itemCount: items.length,
        itemBuilder: (BuildContext context, int index) {
            return Container();
                   } 
         )
        ),
        Divider(),//<< any widgets added
         ],
       ),

     ],
   ), 
  );

Comments

नेस्टेड स्तंभों में विस्तारित का उपयोग न करें केवल shrikWrap का उपयोग करें: सही, भौतिकी: NeverScrolPhysics () गुण सूची में

— मोहम्मद कामेल

Answer 8

आप उपयोग कर सकते हैं Flexऔर Flexibleविगेट्स। उदाहरण के लिए:

Flex(
direction: Axis.vertical,
children: <Widget>[
    ... other widgets ...
    Flexible(
        flex: 1,
        child: ListView.builder(
        itemCount: ...,
        itemBuilder: (context, index) {
            ...
        },
        ),
    ),
],

);

Answer 9

return new MaterialApp(
    home: new Scaffold(
      appBar: new AppBar(
        title: new Text("Login / Signup"),
      ),
      body: new Container(
        child: new Center(
          child: ListView(
          //mainAxisAlignment: MainAxisAlignment.center,
          scrollDirection: Axis.vertical,
            children: <Widget>[
              new TextField(
                decoration: new InputDecoration(
                  hintText: "E M A I L    A D D R E S S"
                ),
              ),
              new Padding(padding: new EdgeInsets.all(15.00)),
              new TextField(obscureText: true,
                decoration: new InputDecoration(
                  hintText: "P A S S W O R D"
                ),
                ),
              new Padding(padding: new EdgeInsets.all(15.00)),
              new TextField(decoration: new InputDecoration(
                hintText: "U S E R N A M E"
              ),),
              new RaisedButton(onPressed: null,
              child:  new Text("SIGNUP"),),
              new Padding(padding: new EdgeInsets.all(15.00)),
              new RaisedButton(onPressed: null,
              child: new Text("LOGIN"),),
              new Padding(padding: new EdgeInsets.all(15.00)),
              new ListView(scrollDirection: Axis.horizontal,
              children: <Widget>[
                new RaisedButton(onPressed: null,
                child: new Text("Facebook"),),
                new Padding(padding: new EdgeInsets.all(5.00)),
                new RaisedButton(onPressed: null,
                child: new Text("Google"),)
              ],)

            ],
          ),
        ),
        margin: new EdgeInsets.all(15.00),
      ),
    ),
  );

Answer 10

स्लाइस का उपयोग करके देखें:

Container(
    child: CustomScrollView(
      slivers: <Widget>[
        SliverList(
          delegate: SliverChildListDelegate(
            [
              HeaderWidget("Header 1"),
              HeaderWidget("Header 2"),
              HeaderWidget("Header 3"),
              HeaderWidget("Header 4"),
            ],
          ),
        ),
        SliverList(
          delegate: SliverChildListDelegate(
            [
              BodyWidget(Colors.blue),
              BodyWidget(Colors.red),
              BodyWidget(Colors.green),
              BodyWidget(Colors.orange),
              BodyWidget(Colors.blue),
              BodyWidget(Colors.red),
            ],
          ),
        ),
        SliverGrid(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
          delegate: SliverChildListDelegate(
            [
              BodyWidget(Colors.blue),
              BodyWidget(Colors.green),
              BodyWidget(Colors.yellow),
              BodyWidget(Colors.orange),
              BodyWidget(Colors.blue),
              BodyWidget(Colors.red),
            ],
          ),
        ),
      ],
    ),
  ),
)