【问题标题】:GridView containing Cards doesn't calculate height correctly包含 Cards 的 GridView 无法正确计算高度
【发布时间】:2017-11-28 05:00:16
【问题描述】:

我有一个应用程序使用GridView 来尝试布置一些Cards。相关代码看起来有点像这样

body: new GridView.count(
  crossAxisCount: 2,
  children: [new Card(
    child: new Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        const ListTile(
          leading: const Text("0", style: const TextStyle(
              fontWeight: FontWeight.bold, fontSize: 24.0)),
          title: const Text('Some Heading'),
          subtitle: const Text('My Subtitle'),
        ),
        new ButtonTheme
            .bar( // make buttons use the appropriate styles for cards
          child: new ButtonBar(
            children: <Widget>[
              new FlatButton(
                child: const Text('CALL TO ACTION'),
                onPressed: () {
                  /* ... */
                },
              ),
            ],
          ),
        ),
      ],
    ),
  ),
  // same card repeated
  ],
),

不幸的是,它渲染得不好:

卡片太高了,它们应该在“CALL TO ACTION”按钮下方结束。我该如何解决这个问题,并让网格行自动尊重内容的高度?

【问题讨论】:

标签: dart flutter


【解决方案1】:

您的问题是GridView.count 的图块的默认纵横比为1.0(即正方形),听起来您希望图块比这短。

快速解决方法是将childAspectRatio 硬编码为您喜欢的数字。更细微的方法是实现一个SliverGridDelegate,它描述了您想要的布局并使用GridView.custom。您也可以只使用 2 元素 Row 小部件的 ListView 而根本不使用 GridView

【讨论】:

  • 您能否展示一些代码,说明如何实现每个孩子的这种不同高度?
  • 这是基本要求。我想知道为什么它需要如此复杂以至于 GridView.count(...) 无法考虑它。
  • @collin - Collin Jackson 我必须以 1:1(宽度:高度)的比例显示网格,但高度应该额外增加 100 像素。例如。我能怎么做?请建议。谢谢。
【解决方案2】:

更改GridView.count 的纵横比应该可以解决问题。下面的代码对我有用。你可以随意调整它

 GridView.count(
      ...
      childAspectRatio: 10 / 9,

【讨论】:

    猜你喜欢
    • 2014-08-18
    • 2011-03-29
    • 2017-11-03
    • 1970-01-01
    • 2014-06-02
    • 1970-01-01
    • 2014-07-19
    • 2011-09-30
    • 1970-01-01
    相关资源
    最近更新 更多