根据flutter中的动态内容调整GridView子高度 [英] Adjust GridView child height according to the dynamic content in flutter

问题描述

如何在flutter中实现这个复杂的视图?

我正在尝试实现一个带有 n 列的 GridView 并且孩子应该具有一定的纵横比(比如 1.3)，但孩子的高度应该是(用 Android 术语包装内容).

I am trying to implement a GridView with n columns and the child should be of a certain aspect ratio(say 1.3) but the height of the child should be (wrap content in Android terminology).

我被卡住了，因为据我所知，GridView 的 childAspectRatio:1.3(默认值:1)总是以相同的纵横比而不是动态内容布置子项.

I am stuck because as fas I understand GridView's childAspectRatio:1.3 (default:1) always lays out the child in same aspect ratio but not dynamic content.

注意:孩子应该根据图片的高度扩大自己的高度

Note: Child should expand its height according to the image's height

用例:我正在尝试实现如下所示的视图，其中图像被包裹 height = wrap content 以便万一具有拉伸高度的图像可以看起来好并形成一个 StaggeredGridView 类似的结构.

Use case: I am trying to implement a view like below, in which image is wrapped height = wrap content so that in case an image with stretched height can look good and form a StaggeredGridView like structure.

推荐答案

我在 0.2.0 中添加了构造函数 StaggeredTile.fit.有了它，你应该能够构建你的应用程序;-)

I added the constructor StaggeredTile.fit in the 0.2.0. With that you should be able to build you app ;-).

第一条评论:现在使用 StaggeredGridView，布局和子渲染是完全独立的.因此，正如@rmtmckenzie 所说，您必须获取图像大小才能创建图块.然后你可以使用 StaggeredTile.count 构造函数和 mainAxisCellCount 参数的双精度值:new StaggeredTile.count(x, x*h/w) (其中 h 是图像的高度，w 是它的宽度.这样图块的纵横比与图像相同.

First comment: For now with StaggeredGridView, the layout and the children rendering are completely independant. So as @rmtmckenzie said, you will have to get the image size to create your tiles. Then you can use StaggeredTile.count constructor with a double value for the mainAxisCellCount parameter: new StaggeredTile.count(x, x*h/w) (where h is the height of your image and w its width. So that the tile with have the same aspect ratio as your image.

您想要完成的工作需要更多的工作，因为您希望在图像下方有一个包含一些信息的区域.为此，我认为您必须在创建瓷砖之前计算其实际宽度并使用 StaggeredTile.extent 构造函数.

What you want to accomplish will need more work because you want to have an area below the image with some information. For that I think you will have to compute the real width of your tile before creating it and use the StaggeredTile.extent constructor.

我知道这并不理想，我目前正在研究一种创建布局的新方法.我希望它有助于构建像您这样的场景.

I understand this is not ideal and I'm currently working on a new way to create the layout. I hope it will help to build scenarios like yours.

这篇关于根据flutter中的动态内容调整GridView子高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！