কীভাবে কোনও ঝাঁকুনির একটি কলামে একটি তালিকাভিউ যুক্ত করবেন?

Question

আমি আমার ফ্লাটার অ্যাপ্লিকেশনটির জন্য একটি সাধারণ লগইন পৃষ্ঠা তৈরির চেষ্টা করছি। আমি সাফল্যের সাথে টেক্সটফিল্ড এবং লগইন / সাইন ইন বোতামগুলি তৈরি করেছি। আমি একটি অনুভূমিক তালিকার ভিউ যুক্ত করতে চাই। আমি যখন কোড চালনা করি তখন আমার উপাদানগুলি অদৃশ্য হয়ে যায়, আমি যদি তালিকাভিউ ব্যতীত এটি করি তবে এটি আবার ঠিক আছে। আমি কীভাবে এটি সঠিকভাবে করতে পারি?

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অবশিষ্ট স্থানটি প্রসারিত করতে উইজেট ব্যবহার করে use

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

আমার উচ্চতা স্থির করা উচিত নয় এবং অন্যান্য উত্তরগুলি আমার পক্ষে কাজ করে না = /

— ড্যানিয়েল ভিলা

@ ডানিয়েলভিলেলা বিকল্প 1 আপনার পক্ষে কাজ করা উচিত। যদি না হয় তবে এটি প্রশ্ন হিসাবে পোস্ট করুন এবং আমি যদি উপলব্ধ থাকি তবে আমি উত্তর দিতে পারি।

— কপসঅনরোড

আমি এটা কাজ পেয়েছিলাম! ধন্যবাদ। আমাকে কিছু কৌশলগত জায়গায় বিস্তৃত () রাখতে হয়েছিল।

— ড্যানিয়েল Vilala

ধন্যবাদ, আমি প্রসারিত সম্পর্কে ভাবি নি।

— গিলভান আন্দ্রে

সঙ্কুচিতভাবে মোড়ানোর জন্য ধন্যবাদ: লিস্টভিউতে সত্য ()

— রানা হায়দার

Answer 4

আমার SingleChildScrollViewপিতা-মাতা এবং একটি Columnউইজেট এবং তারপরে শেষ সন্তানের হিসাবে তালিকার উইজেট রয়েছে।

আমার জন্য কাজ করা তালিকা ভিউতে এই বৈশিষ্ট্যগুলি যুক্ত করা।

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

Answer 5

প্রসারিত উইজেট উপলব্ধ স্থানের সাথে এটির আকারটি যতটা বাড়ায় বাড়িয়ে দেয় যেহেতু তালিকাভিউ মূলত একটি অসীম উচ্চতা রাখায় এটি ত্রুটির কারণ ঘটবে।

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

এখানে আমাদের ফ্লেক্সিবল উইজেটটি ব্যবহার করা উচিত কারণ এটি কেবলমাত্র প্রয়োজনীয় পর্দাতে পূর্ণ স্ক্রিনে রেন্ডার করার জন্য পর্যাপ্ত উইজেট না থাকলেও পূর্ণ বর্ধিত স্ক্রিন গ্রহণের মতো প্রয়োজনীয় স্থানটি গ্রহণ করবে।

Answer 6

প্রকৃতপক্ষে, আপনি যখন ডকগুলি পড়েন তখন তালিকাভিউটি প্রসারিত উইজেটের ভিতরে থাকা উচিত যাতে এটি কাজ করতে পারে।

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

}

Answer 7

উপরের অন্যরা যেমন উল্লেখ করেছেন, এক্সপেন্ডেড সহ মোড়ানো তালিকার ভিউইন হ'ল সমাধান।

তবে আপনি নেস্টেড কলামগুলির সাথে ডিল করার সময় আপনার তালিকাভিউকে একটি নির্দিষ্ট উচ্চতায় সীমাবদ্ধ করতে হবে (এই সমস্যার মুখোমুখি হতে হবে)।

কারও যদি অন্য কোনও সমাধান থাকে তবে দয়া করে মন্তব্যে উল্লেখ করুন বা উত্তর যুক্ত করুন।

উদাহরণ

  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

নেস্টেড কলামগুলিতে প্রসারিত কেবল শ্রিক র্যাপ ব্যবহার করবেন না: সত্য, পদার্থবিজ্ঞান: নেভারসক্রোলফিজিক্স () তালিকাতে বৈশিষ্ট্যগুলি দেখুন

— মোহাম্মদ কামেল

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),
            ],
          ),
        ),
      ],
    ),
  ),
)