GridView mit Karten berechnet die Höhe nicht korrekt

Question

Ich habe eine App, die eine GridView verwendet, um einige Card s auszulegen. Der entsprechende Code sieht ein bisschen wie diese

body: new GridView.count(
    crossAxisCount: 2, 
    children: [new Card(
    child: new Column(
     mainAxisSize: MainAxisSize.min, 
     children: <Widget>[ 
     const ListTile(
      leading: const Text("0", style: const TextStyle(
       fontWeight: FontWeight.bold, fontSize: 24.0)), 
      title: const Text('Some Heading'), 
      subtitle: const Text('My Subtitle'), 
     ), 
     new ButtonTheme 
      .bar(// make buttons use the appropriate styles for cards 
      child: new ButtonBar(
      children: <Widget>[ 
       new FlatButton(
       child: const Text('CALL TO ACTION'), 
       onPressed:() { 
        /* ... */ 
       }, 
      ), 
      ], 
     ), 
     ), 
     ], 
    ), 
), 
    // same card repeated 
    ], 
), 

Leider ist es macht nicht gut:

Die Karten zu groß sind, sollen sie nur unter dem „CALL TO ACTION“ beenden Taste. Wie kann ich das beheben und die Rasterzeilen automatisch die Höhe des Inhalts einhalten?

Answer 1

Ihr Problem ist, dass die Kacheln von GridView.count ein Standard-Seitenverhältnis von 1.0 (d. H. Quadratisch) haben, und es klingt wie Sie möchten, dass Ihre Kacheln kürzer als das sind.

Eine schnelle Lösung wäre, den childAspectRatio zu einer Zahl hart zu kodieren, die Sie mögen. Ein nuancierterer Ansatz wäre es, ein SliverGridDelegate zu implementieren, das das gewünschte Layout beschreibt und GridView.custom verwendet. Sie können auch einfach eine ListView von 2-Element Widgets und nicht GridView überhaupt verwenden.