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

问题描述

在项目中，我在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,),],),),],),);}),),);}

解决方案

问题来自SliverGridDelegateWithFixedCrossAxisCount:

<块引用>

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

我建议你使用 flutter_staggered_grid_view: 并放弃 AspectRatio小部件.关于磁贴的更多信息这里.

body: StaggeredGridView.countBuilder(交叉轴计数:2，项目数:6，itemBuilder: (BuildContext context, int index) =>卡片(边距:常量 EdgeInsets.all(10.0)，孩子:容器(孩子:列(crossAxisAlignment:CrossAxisAlignment.start，孩子们: [Image.network('https://upload.wikimedia.org/wikipedia/commons/6/66/An_up-close_picture_of_a_curious_male_domestic_shorthair_tabby_cat.jpg',适合:BoxFit.fill，),填充(填充:EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0),孩子:列(crossAxisAlignment:CrossAxisAlignment.start，孩子们: [文本(猫"，textAlign:TextAlign.center)，],),)],),)),staggeredTileBuilder: (int index) =>交错瓷砖.fit(1),)

In the project, I'm using images and text inside the flutter card, but the card returns a fixed height. and then I also tried just using a card with an empty value, but it still returns a fixed height. what should I do to make the height of the 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,
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              );
            }),
      ),
    );
  }

解决方案

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.

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屋！