如何让 flutter card 根据内容自动调整高度

Question

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


    @override
    Widget build(BuildContext context) {
    final title = 'Food Recipes';
    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: GridView.builder(
            itemCount: _listViewData.length,
            gridDelegate:
                SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
            itemBuilder: (context, index) {
              return Card(
                margin: const EdgeInsets.all(10.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    AspectRatio(
                      aspectRatio: 18.0 / 13.0,
                      child: Image.network(
                        _listViewDataImage[index],
                        fit: BoxFit.fill,
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            _listViewData[index],
                            textAlign: TextAlign.center,
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              );
            }),
      ),
    );
  }

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

Answer 2

问题来自SliverGridDelegateWithFixedCrossAxisCount:

Creates grid layouts with a fixed number of tiles in the cross axis
This delegate creates grids with equally sized and spaced tiles.

我推荐你使用flutter_staggered_grid_view: and to give up to AspectRatio widget. More about tiles 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),
)

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

Use it like GridView

输出：

构造函数 :

StaggeredGridView follow the same constructors convention than the GridView。还有两个构造函数：countBuilder 和 extentBuilder。这些构造函数允许您为布局定义一个构建器，为子级定义一个构建器。

方块:

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

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

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

Answer 4

将你的卡片包裹在里面 Constraints 它会根据文本 child 的要求设置 Container 高度。

Container(
    constraints: BoxConstraints(
    maxHeight: double.infinity,
),
child: Column(
children: [
  Text(
    'Hello flutter...i like flutter...i like google...',
    softWrap: true,
    style: TextStyle(
        color: Colors.white, fontSize: 20 , ),

  ),
],),)

如何让 flutter card 根据内容自动调整高度

How to make flutter card auto adjust its height depend on content

flutter

gridview

flutter-layout

height