Flutter 通过 ListView.builder 改进 ExpansionTile 性能

Question

我正在尝试创建

ExpansionTile

和

ListView.builder

作为孩子的视图。它效果很好，但如果我的

ListView.builder

变大，就需要一些时间来渲染它，这会稍微影响用户体验。有什么办法可以帮助提高性能吗？

下面是我的示例代码：

ExpansionTile(
  title: Text(title),
  controlAffinity: ListTileControlAffinity.trailing,
  initiallyExpanded: true,
  maintainState: true,  
  children: [
     ListView.builder(
          itemCount: data.length,
          shrinkWrap: true,
          physics: NeverScrollableScrollPhysics(),
          itemBuilder: (context, index) => widgetList[index],
        )
  ])

Answer 1

这是代码的改进版本，经过优化以获得更好的性能：

ExpansionTile(
  title: Text(title),
  controlAffinity: ListTileControlAffinity.trailing,
  initiallyExpanded: true,
  maintainState: true,
  children: [
    ListView.builder(
      itemCount: data.length,
      shrinkWrap: false, // Changed to false for better performance
      itemBuilder: (context, index) {
        // Implement lazy loading or load a smaller subset of data initially
        // Make sure widgetList[index] is a lightweight widget
        return widgetList[index];
      },
    ),
  ],
)

主要变化：

1. 将shrinkWrap设置为false以避免最初计算列表的完整大小。
2. 确保 widgetList[index] 由轻量级小部件组成。
3. 您可以通过在用户滚动时动态加载更多数据来实现延迟加载，尽管这可能需要更复杂的状态管理解决方案。

请记住，这些是一般准则，实际性能改进可能会有所不同，具体取决于您的具体用例和数据。

Answer 2

1。收缩包装

我建议摆脱 shirnkWrap （如果可能的话），因为它计算列表中所有元素的大小。

2。项目生成器

另外，我建议注意 itemBuilder 内部的操作，因为它会减慢渲染项目的速度。