फ़्लटर में GridView में विजेट के लिए कस्टम ऊंचाई कैसे सेट करें?

Question

कंटेनर ग्रिडव्यू के लिए ऊंचाई निर्दिष्ट करने के बाद भी, मेरा कोड वर्ग विजेट का उत्पादन कर रहा है।

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> widgetList = ['A', 'B', 'C'];

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Container(
        child: new GridView.count(
          crossAxisCount: 2,
          controller: new ScrollController(keepScrollOffset: false),
          shrinkWrap: true,
          scrollDirection: Axis.vertical,
          children: widgetList.map((String value) {
            return new Container(
              height: 250.0,
              color: Colors.green,
              margin: new EdgeInsets.all(1.0),
              child: new Center(
                child: new Text(
                  value,
                  style: new TextStyle(fontSize: 50.0,color: Colors.white),
                ),
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}

ऊपर दिए गए कोड का आउटपुट बाईं ओर दिखाया गया है। मैं कस्टम ऊंचाई विजेट के साथ एक GridView कैसे प्राप्त कर सकता हूं जैसा कि दाईं ओर दिखाया गया है?

Comments

GridView युक्त कार्ड

— xskxzr

Answer 1

कुंजी है childAspectRatio। इस मान का उपयोग लेआउट को निर्धारित करने के लिए किया जाता है GridView। वांछित पहलू प्राप्त करने के लिए आपको इसे ( itemWidth/ itemHeight) पर सेट करना होगा । समाधान यह होगा:

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> widgetList = ['A', 'B', 'C'];

  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;

    /*24 is for notification bar on Android*/
    final double itemHeight = (size.height - kToolbarHeight - 24) / 2;
    final double itemWidth = size.width / 2;

    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Container(
        child: new GridView.count(
          crossAxisCount: 2,
          childAspectRatio: (itemWidth / itemHeight),
          controller: new ScrollController(keepScrollOffset: false),
          shrinkWrap: true,
          scrollDirection: Axis.vertical,
          children: widgetList.map((String value) {
            return new Container(
              color: Colors.green,
              margin: new EdgeInsets.all(1.0),
              child: new Center(
                child: new Text(
                  value,
                  style: new TextStyle(
                    fontSize: 50.0,
                    color: Colors.white,
                  ),
                ),
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}

Comments

उत्तर के लिए धन्यवाद। मुझे एक घंटे तक

— बचाया

जब तक आप गणना का तरीका नहीं कर लेते, तब तक GridView के पास संपत्ति चाइल्डस्पेक्ट अनुपात नहीं है: - /

— ओलिवर डिक्सन

@OliverDixon आप उपयोग कर रहे हैं GridView.builderऔर SliverGridDelegateWithFixedCrossAxisCountउसके बाद childAspectRatioपर हैgridDelegate

— Fifer भेड़

कैसे इस ऊंचाई को गतिशील बनाने के लिए?

— दानी

Answer 2

कुछ दिन पहले मैं यहाँ आया था कि गतिशील रूप से ऊँचाई बदलने का एक तरीका मिल जाए जब छवियों को इंटरनेट से लोड किया जाता है और इसका उपयोग childAspectRatioनहीं किया जा सकता है क्योंकि इसका ग्रिडड्यू में सभी विजेट पर लागू होता है (प्रत्येक के लिए समान ऊंचाई)।

यह उत्तर किसी ऐसे व्यक्ति की मदद कर सकता है जो प्रत्येक विजेट सामग्री के अनुसार अलग ऊँचाई चाहते हैं:

मुझे रोमेन रास्टेल द्वारा फ्लैटर स्टैगर्ड ग्रिडड्यू नामक पैकेज मिला । इस पैकेज का उपयोग करके हम यहां बहुत सारी चीजें कर सकते हैं।

हम जो चाहते हैं उसे प्राप्त करने के लिए हम इसका उपयोग कर सकते हैं StaggeredGridView.count()और इसकी संपत्ति staggeredTiles:और इसके मूल्य के लिए आप सभी विजेट को मैप कर सकते हैं और आवेदन कर सकते हैं StaggeredTile.fit(2)।

उदाहरण कोड:

StaggeredGridView.count(
    crossAxisCount: 4, // I only need two card horizontally
    padding: const EdgeInsets.all(2.0),
    children: yourList.map<Widget>((item) {
      //Do you need to go somewhere when you tap on this card, wrap using InkWell and add your route
      return new Card(
        child: Column(
          children: <Widget>[
             Image.network(item.yourImage),
             Text(yourList.yourText),//may be the structure of your data is different
          ],
        ),
      );
    }).toList(),

    //Here is the place that we are getting flexible/ dynamic card for various images
    staggeredTiles: yourList.map<StaggeredTile>((_) => StaggeredTile.fit(2))
        .toList(),
    mainAxisSpacing: 3.0,
    crossAxisSpacing: 4.0, // add some space
  ),
);

आप यहां पूरा उदाहरण (कॉपी, पेस्ट और रन) पा सकते हैं ।

Answer 3

crossAxisCount, crossAxisSpacingऔर स्क्रीन की चौड़ाई निर्धारित करता है width, और childAspectRatioनिर्धारित करता है height।

मैंने उन दोनों के बीच संबंध का पता लगाने के लिए गणना की।

var width = (screenWidth - ((_crossAxisCount - 1) * _crossAxisSpacing)) / _crossAxisCount;
var height = width / _aspectRatio;

---

पूर्ण उदाहरण:

double _crossAxisSpacing = 8, _mainAxisSpacing = 12, _aspectRatio = 2;
int _crossAxisCount = 2;

@override
Widget build(BuildContext context) {
  double screenWidth = MediaQuery.of(context).size.width;

  var width = (screenWidth - ((_crossAxisCount - 1) * _crossAxisSpacing)) / _crossAxisCount;
  var height = width / _aspectRatio;

  return Scaffold(
    body: GridView.builder(
      itemCount: 10,
      itemBuilder: (context, index) => Container(color: Colors.blue[((index) % 9) * 100]),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: _crossAxisCount,
        crossAxisSpacing: _crossAxisSpacing,
        mainAxisSpacing: _mainAxisSpacing,
        childAspectRatio: _aspectRatio,
      ),
    ),
  );
}

Answer 4

यह मेरे लिए काम कर रहा है।

उदाहरण कोड:

var _crossAxisSpacing = 8;
var _screenWidth = MediaQuery.of(context).size.width;
var _crossAxisCount = 2;
var _width = ( _screenWidth - ((_crossAxisCount - 1) * _crossAxisSpacing)) / _crossAxisCount;
var cellHeight = 60;
var _aspectRatio = _width /cellHeight;

जाली देखना:

         GridView.builder(
                          padding: EdgeInsets.only(
                              left: 5.0, right: 5.0, top: 10, bottom: 10),
                          shrinkWrap: false,
                          itemCount: searchList.length,
                          gridDelegate:
                              SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: _crossAxisCount,childAspectRatio: _aspectRatio),
                          itemBuilder: (context, index) {
                            final item = searchList[index];
                            return Card(
                              child: ListTile(
                                title: Text(item.name,maxLines: 1,overflow: TextOverflow.ellipsis),
                                trailing: Container(
                                  width: 15,
                                  height: 15,
                                  decoration: BoxDecoration(
                                      color: item.isActive == true
                                          ? Theme.of(context).primaryColor
                                          : Colors.red,
                                      borderRadius: BorderRadius.all(
                                          Radius.circular(50))),
                                ),
                                onTap: () {

                                },
                              ),
                              elevation: 0.5,
                            );
                          },
                        )