包含卡的GridView不能正確計算高度

Question

我有一個應用程序使用GridView來嘗試和佈置一些Card s。相關的代碼看起來有點像這樣

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

不幸的是，它沒有很好地渲染：

該卡是太高，他們應該結束僅低於「行動呼籲」按鈕。我怎樣才能解決這個問題，並讓網格行自動尊重內容的高度？

Answer 1

您的問題是，GridView.count的瓷磚的默認長寬比爲1.0（即正方形），聽起來好像您希望瓷磚比這更短。

快速解決方法是將childAspectRatio硬編碼爲您喜歡的數字。更細緻的方法是實施描述所需佈局的SliverGridDelegate，並使用GridView.custom。你也可以只做一個ListView的2元件部件，根本不使用GridView。