2017-06-24 10 views
0

GridViewを使ってCardをレイアウトしてレイアウトしているアプリがあります。カードを含むGridViewで高さが正しく計算されない

renderedカードがあまりにも背が高い

、彼らは単に「ACTION TO CALL」の下に終了する必要があります:関連するコードは、残念ながら、この

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

のようなビット、それがうまくレンダリングされません見えますボタン。これを修正し、グリッドの行がコンテンツの高さを自動的に尊重する方法を教えてください。

答えて

1

GridView.countのタイルは、デフォルトのアスペクト比が1.0(つまり四角形)であり、タイルがそれよりも短くなるように思えます。

速い修正は、childAspectRatioを好きな数にハードコードすることです。より微妙なアプローチは、SliverGridDelegateを実装して、希望するレイアウトを記述し、GridView.customを使用することです。 2要素のウィジェットのListViewを実行し、GridViewをまったく使用しないこともできます。

関連する問題