如何使颤动卡根据内容自动调整其高度答案

【问题标题】：How to make flutter card auto adjust its height depend on content如何使颤动卡根据内容自动调整其高度
【发布时间】：2020-02-01 10:36:36
【问题描述】：

在项目中，我在flutter卡片内使用了图片和文字，但是卡片返回了一个固定的高度。然后我也尝试只使用一个空值的卡，但它仍然返回一个固定的高度。我应该怎么做才能使卡片的高度随内容自动调整？

@覆盖小部件构建（BuildContext 上下文）{ 最终标题 = '食物食谱'; 返回材料应用程序（标题：标题，家：脚手架（应用栏：应用栏（标题：文本（标题）， ), 正文：GridView.builder（ itemCount：_listViewData.length，网格委托： SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2), itemBuilder：（上下文，索引）{ 退货卡（边距：常量 EdgeInsets.all(10.0)，孩子：列（ crossAxisAlignment：CrossAxisAlignment.start，孩子们： [ 纵横比（纵横比：18.0 / 13.0，孩子：Image.network（ _listViewDataImage[索引], 适合：BoxFit.fill， ), ), 填充（填充：EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0), 孩子：列（ crossAxisAlignment：CrossAxisAlignment.start，孩子们： [ 文本（ _listViewData[索引], textAlign: TextAlign.center, ), ], ), ), ], ), ); }), ), ); }

【问题讨论】：

标签： flutter gridview flutter-layout height

【解决方案1】：

你想用Column 包裹你的卡片，因为内柱占满高度

 Column(children: <Widget>[
      Card(
        margin: const EdgeInsets.all(10.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            AspectRatio(
              aspectRatio: 18.0 / 13.0,
              child: Image.network(
               "https://picsum.photos/200",
                fit: BoxFit.fill,
              ),
            ),
            Padding(
              padding: EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    "Just add your desired image size (width & height) after our URL, and you'll get a random image.",
                    textAlign: TextAlign.center,
                  ),
                ],
              ),
            ),
          ],
        ),
      )
])

【讨论】：

【解决方案2】：

问题来自SliverGridDelegateWithFixedCrossAxisCount：

使用固定数量的横轴创建网格布局
此委托创建具有大小相同和间隔的图块的网格。

我建议您使用 flutter_staggered_grid_view: 并放弃 AspectRatio 小部件。更多关于瓷砖here.

body: StaggeredGridView.countBuilder(
   crossAxisCount: 2,
   itemCount: 6,
   itemBuilder: (BuildContext context, int index) => 
     Card(
       margin: const EdgeInsets.all(10.0),
       child: Container(
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
            Image.network('https://upload.wikimedia.org/wikipedia/commons/6/66/An_up-close_picture_of_a_curious_male_domestic_shorthair_tabby_cat.jpg',
              fit: BoxFit.fill,
            ),
            Padding(
              padding: EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text("Cat",textAlign: TextAlign.center),
                ],
            ),
         )],
       ),
     )
   ),
   staggeredTileBuilder: (int index) =>
     StaggeredTile.fit(1),
)

【讨论】：

它很好地解决了我的第一个关于卡的问题，第二个关于溢出底部的问题，因为固定大小，非常感谢...

【解决方案3】：

试试 flutter_staggered_grid_view 包。

在 pubspec.yaml 中，添加如下依赖：

dependencies:
  flutter_staggered_grid_view: any

在您的库中，添加以下导入：

import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

示例：

  StaggeredGridView.countBuilder(
  crossAxisCount: 4,
  itemCount: 8,
  itemBuilder: (BuildContext context, int index) => new Container(
      color: Colors.green,
      child: new Center(
        child: new CircleAvatar(
          backgroundColor: Colors.white,
          child: new Text('$index'),
        ),
      )),
  staggeredTileBuilder: (int index) =>
      new StaggeredTile.count(2, index.isEven ? 2 : 1),
  mainAxisSpacing: 4.0,
  crossAxisSpacing: 4.0,
),

像GridView一样使用它

输出：

构造函数：

StaggeredGridView 遵循与 GridView 相同的构造函数约定。还有两个构造函数：countBuilder 和 extentBuilder。这些构造函数允许您为布局定义一个构建器，为子级定义一个构建器。

图块：

StaggeredGridView 需要知道如何显示每个图块，以及与图块相关联的小部件。

一个tile需要有固定数量的cell占据横轴。对于主轴的范围，您有 03 个选项：

您想要固定数量的单元格 => 使用 StaggeredTile.count。
您想要一个固定范围 => 使用 StaggeredTile.extent。
您需要一个可变范围，由图块的内容定义本身 => 使用StaggeredTile.fit。

【讨论】：