如何使颤振卡自动调整其高度取决于内容 [英] How to make flutter card auto adjust its height depend on content

问题描述

在项目im中，使用颤振卡内的图像和文本，但卡返回固定高度.然后我也尝试仅使用具有空值的卡，但它仍返回固定高度.我该怎么做才能使卡的高度随内容自动调整.

In the project im using image and text inside the flutter card, but the card return a fixed height. and then i also tried just using a card with an empty value, but it still return a fixed height. what should i do to make the height of card auto adjust with content.

    @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,
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              );
            }),
      ),
    );
  }

推荐答案

问题来自SliverGridDelegateWithFixedCrossAxisCount:

The problem comes from 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:并放弃AspectRatio小部件. 此处.

I recommend you to use 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),
)

这篇关于如何使颤振卡自动调整其高度取决于内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！