Performance 简单颤振列表视图起伏滚动

我一直在评估应用程序中使用的颤振，并从一个非常简单的文本列表示例开始。在构建了第一个视图之后，我注意到列表视图有起伏的滚动，所以我仔细查看了showcase应用程序，结果发现，虽然它是一个漂亮的应用程序，但它也遇到了同样的问题——使用简单的文本列表进行起伏的滚动。到目前为止，我已经在iOS模拟器、iPhone XR、三星Galaxy Android设备和Android Pixel 2 XL模拟器上证实了这一点

我看不到围绕这一点的讨论，所以我怀疑自己是否做错了什么，但也怀疑我的例子有多简单，这反映了同样的问题

我希望社区能够理解： 1.我做了什么明显错误/愚蠢的事情导致了这一切吗 2.如果你在你的设备上运行，你看到我看到的了吗？ 3.这是已知的，并将继续工作？如果我承诺在不远的将来，我的列表将顺利滚动，我能感到舒服吗

下面是您可以运行的代码，以重现这一点（很抱歉，这有点做作，但我想使用各种颤振/飞镖功能）：

导入“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“我的名单”，
家：脚手架(
appBar:appBar(
标题：文本（“我的列表”），
背景颜色：颜色。来自RGBO（255,0,0,0.9），
),
主体：填充物(
填充：所有边缘设置（16.0），
子：列(
儿童：[
已展开（子项：TimeSelector（）），
],
)),
));
}
}
抽象类ListItem{}
类TimeHeader实现ListItem{
最终字符串标题；
TimeHeader（this.header）；
}
类TimeOption实现ListItem{
最终字符串时间字符串；
终弦子午线；
时间选项（this.timeString，this.meridian）；
}
最终列表文字=[
时间标题（“上午”），
时间选项（“10:00”、“上午”），
时间选项（“上午10:30”），
时间选项（“上午11:30”），
时间标题（“下午”），
时间选项（“1:00”、“下午”），
时间选项（“下午1:30”），
时间选项（“下午2:30”），
时间头（“夜间”），
时间选项（“下午5:30”），
时间选项（“6:30”、“下午”），
时间选项（“7:30”、“下午”），
时间选项（“8:30”、“下午”），
时间选项（“9:30”、“下午”），
时间选项（“10:30”、“下午”），
时间选项（“11:30”、“下午”），
时间选项（“11:45”，“下午”），
时间选项（“11:49”，“下午”），
];
类TimeSelector扩展了无状态小部件{
final _headerFont=新的文本样式（fontwweight:fontwweight.w600，fontSize:13.0，颜色：color.fromRGBO（1641641641））；
最终_smallerFont=常量文本样式（fontSize:12.0）；
@凌驾
ListView生成（构建上下文）{
返回新的ListView.builder(
填充：常数边集全部（16.0），
itemCount:litems.length，
itemBuilder：（BuildContext ctxt，int index）=>\u buildItem（ctxt，index），
);
}
小部件_buildItem（BuildContext ctxt，int index）{
最终项目=文字[索引]；
if（项目为时间头）{
返回新的ListTile(
标题：正文(
项目.标题，
风格：_headerFont，
),
);
}else if（项为TimeOption）{
返回新的ListTile(
标题：正文(
item.timeString+item.meridian.toUpperCase（），
风格：_smallerFont，
),
);
}否则{
返回新文本（“未知”）；
}
}
}

如果您处理的是数量非常少的列表项的静态数据，您可以使用

addAutomaticePalies:true

Flitter ListView在调试模式下滚动时肯定存在问题。虽然您的代码将在发布模式下正常运行，但不会在滚动中出现任何延迟。但是，如果您想在调试模式下不延迟地滚动，您可以选择SingleChildScrollView而不是ListView。只需将滚动小部件放在一列中，并将该列作为SingleChildScrollView的子级。 在本例中，您使用的是ListView.builder。我建议您使用此代码实现非常平滑的滚动：

@override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Flexible(
            child: ListView.builder(
              shrinkWrap: true,
              physics: NeverScrollableScrollPhysics(),
              padding: const EdgeInsets.all(16.0),
              itemCount: litems.length,
              itemBuilder: (BuildContext ctxt, int index) => _buildItem(ctxt, index),
            ),
          )
        ],
      ),
    );
  }

@覆盖
小部件构建（构建上下文）{
返回SingleChildScrollView(
子：列(
mainAxisSize:mainAxisSize.min，
儿童：[
灵活的(
子项：ListView.builder(
收缩膜：对，
物理学：NeverscrollableScroll物理学（），
填充：常数边集全部（16.0），
itemCount:litems.length，
itemBuilder：（BuildContext ctxt，int index）=>\u buildItem（ctxt，index），
),
)
],
),
);
}

不要忘记使用

mainAxisSize:mainAxisSize.min

作为列大小和

shrinkWrap:true

和

物理：NeverScrollableScrollPhysics（）

---

物理：NeverScrollableScrollPhysics（）将禁用ListView.builder的滚动，您将体验到列表的极平滑滚动

代码似乎很好，但您所说的“起伏滚动”的确切含义是什么？在我的模拟器上测试您的代码是否正常工作没有明显问题。起伏意味着它不会平滑滚动，它跳了一点。你必须密切关注它，这在iphone/iOS模拟器上更为明显。慢慢滚动，你会发现好像帧被跳过了。你是在发布模式下吗？你的代码在发布模式下应该可以正常工作

@override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Flexible(
            child: ListView.builder(
              shrinkWrap: true,
              physics: NeverScrollableScrollPhysics(),
              padding: const EdgeInsets.all(16.0),
              itemCount: litems.length,
              itemBuilder: (BuildContext ctxt, int index) => _buildItem(ctxt, index),
            ),
          )
        ],
      ),
    );
  }