【问题标题】:How to set Custom UI in GridView in Flutter?如何在 Flutter 的 GridView 中设置自定义 UI?
【发布时间】:2020-06-03 22:24:04
【问题描述】:

我有一个这样的设计:

我尝试过使用 StaggeredGridView.count、StaggeredGridView.countBuilder 和 Sliver Grid,但我没有得到预期的结果,因为 UI 必须位于任何设备的中心并且应该看起来像图像。数据将来自 API,因此必须是动态的。

任何帮助将不胜感激。

请找到要实现的设计形象。 这是我的仓库,我尝试了一些代码: https://github.com/marimeli/custom-layout/blob/master/lib/main.dart

【问题讨论】:

  • 从概念上讲,这是否应该是一个网格(无限数量的项目)?如果没有,您应该尝试一种更简单的方法。
  • 现在只有 12 件。您能否说明我应该查看哪些内容才能获得更简单的方法?
  • 我在考虑@JMo 的建议。您可以通过放置Column 和一些Rows 包装Expandeds 来完成此操作。这不是一个优雅的方法,我想。
  • 但是,它似乎更适合这种情况,因为您希望所有内容都位于中心而不是可滚动的(我猜?)。这些规范与网格概念背道而驰。
  • 我尝试了@JMo 的建议,使用静态数据,但在我看来代码不是那么干净。你能检查我的回购的链接吗?我更新了你们俩提出的解决方案。考虑到它应该是动态数据,也许你可以帮我把它弄得更好。

标签: flutter gridview flutter-layout flutter-sliver staggered-gridview


【解决方案1】:

您可以只创建带有容器的行吗?您可以根据每行检索到的容器数量动态调整容器大小。

【讨论】:

  • 为什么不使用列呢?
  • @Qonvex620 因为第一行有 2 列,所以第二行和第三行有 3 列,最后一行有 4 列。在列数因行而异的上下文中使用列是没有意义的。
猜你喜欢
  • 2021-09-14
  • 1970-01-01
  • 2019-07-30
  • 1970-01-01
  • 2021-06-08
  • 1970-01-01
  • 2019-12-05
  • 1970-01-01
  • 2015-04-06
相关资源
最近更新 更多