使用 ListView 项内的嵌套列和行滚动卡顿答案

【问题标题】：Scrolling jank with nested Columns and Rows inside ListView items使用 ListView 项内的嵌套列和行滚动卡顿
【发布时间】：2018-11-11 08:28:24
【问题描述】：

此代码有问题。列表中的每个项目都是一个包含两列文本的行。即使在发布模式下，这也会导致性能大幅下降。目前正在尝试为帖子构建 Reddit 风格的布局。使用嵌套在行中的列会大大降低性能。我的猜测是因为 Row 和 Column 的大小本身基于他们的孩子，所以嵌套它们会增加所需的大小计算。我只是不知道如何解决这个问题。

new ListView.builder(
    controller: new ScrollController(initialScrollOffset: this.offset),
    key: new UniqueKey(),
    itemCount: this._posts != null ? this._posts.length : 0,
    itemBuilder: (BuildContext context, int i) {
      return new PostCard(
        widget._posts[i],
      );
    },
  ),

PostCard 的返回是这样的（例子）：

return new Container(
  child: new Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      new Column(
        children: <Widget>[
          new Text("Hello World"),
          new Text("Hello World"),
          new Text("Hello World"),
          new Text("Hello World"),
        ],
      ),
      new Column(
        children: <Widget>[
          new Text("Hello World"),
          new Text("Hello World"),
          new Text("Hello World"),
          new Text("Hello World"),
        ],
      ),
    ],
  ),
);

编辑：完整 UI 示例的屏幕截图。与上面的嵌套 Column 示例相同的 jank 级别。

New account can't embed, but here's my goal.

【问题讨论】：

你能发布一个你想要完成的示例屏幕吗？
@VinothKumar 是的已添加到帖子中
尝试使用 mainAxisSize：MainAxisSize.max，用于 Row 和 crossAxisAlignment：CrossAxisAlignment.stretch，用于列，将行和列宽度拉伸到全屏
是的，我可以很好地构建 UI，只是在发布时滚动浏览这些卡片列表的速度低于 30fps。我猜它只是 Flutter 处于起步阶段的产品，因为即使是 Hamilton App 和 stackoverflow.com/questions/44396075/… 这篇文章的最佳答案也有相同的 janky 滚动。快速编辑：我在 S7 Edge 上运行所有这些。

标签： dart flutter

【解决方案1】：

更新。在其他手机上测试，不存在问题。问题仅限于我的特定手机（7.0 上的 S7 Edge）。

【讨论】：