当前位置: 首页 > 知识库问答 >
问题:

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

於彬
2023-03-14

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


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

共有1个答案

姚自强
2023-03-14

问题来自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),
)
 类似资料:
  • 我需要用几个小部件填充一张卡片,其中一些需要填充全高,但不是全宽。卡片包含一行,可以将两个小部件相邻对齐,第一个小部件需要垂直填充父小部件(另一个小部件是扩展小部件,因此可以在高度上增长)。使容器立即显示的唯一方法是将其包装在SizedBox中,并将高度设置为特定值。当然,这不允许容器随着卡的高度而增长或收缩。 我尝试了IntrinsicHeight,expand,Row和crossaxisali

  • 问题内容: 例如: 我希望它能够根据其中的内容调整高度,而无需使用滚动。 问题答案: 将此添加到您的部分: 并将您的iframe更改为此:

  • 我正在使用ITextRenderer从HTML生成PDF,我需要做的是一张收银机收据。这张收据有动态宽度,当然还有动态内容。这就是说,内容的高度总是不同的,现在我正在努力寻找一种方法来根据内容调整PDF页面的高度。如果收据太大,最后会有一个长长的白色部分,如果是为了缩短PDF的页码,我只需要在一页中。 我正在使用设置页面大小,但根据宽度和数据计算内容高度几乎是不可能的(非常痛苦)。 这是生成 PD

  • 这是输出: 我试图制作一个应用程序,但当我使用时,我得到了两个按钮之间的空间 我需要一个接一个没有空间 如果使用小部件,不起作用 我尝试了,但我无法清除这些内容。 我尝试使这种类型的. 有人知道或知道这件事吗?

  • 我在我的项目中使用具有自动布局的情节提要(XCode 6.3),起诉大小类Wcompact h规则。我无法根据内容动态设置 UITableView 标头的高度。

  • 我想制作这张我已经分成列的卡片(扩展小部件),我面临的问题是:我无法将颜色容器(右侧列的父)设置为全高,所以只有一部分显示彩色背景。 我所拥有的: > 我尝试了Flutter Inspector工具,并注意到容器及其子列没有得到完全的高度(即使在键入mainaxissize:mainaxissize.max之后) 代码: