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

Question

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

    @覆盖
    小部件构建（BuildContext 上下文）{
    final title = '食物食谱';
    返回 MaterialApp(
      标题：标题，
      主页: 脚手架(
        应用栏：应用栏（
          标题：文本（标题），
        ),
        正文：GridView.builder(
            itemCount: _listViewData.length,
            网格委托：
                SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
            itemBuilder：（上下文，索引）{
              退货卡(
                边距：const 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,
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              );
            }),
      ),
    );
  }

Answer 1

您想将卡片包裹在 a 中，Column因为内部 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,
                  ),
                ],
              ),
            ),
          ],
        ),
      )
])

Answer 2

尝试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相同的构造函数约定。还有两个构造函数：和。这些构造函数允许您定义布局的构建器和子级的构建器。countBuilderextentBuilder

瓷砖：

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

一个图块需要在横轴上占据固定数量的单元格。对于主轴的范围，您有03 个选项：

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

Answer 3

问题来自SliverGridDelegateWithFixedCrossAxisCount：

在横轴上创建具有固定数量图块的网格布局
此代理创建具有相同大小和间距的图块的网格。

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

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