Flutter Web：预渲染 ListView

Question

我正在使用 Flutter Web，我想在用户滚动时预渲染 ListView 而不是构建小部件，您可以在我的测试站点上看到这种行为：https://auties00.github.io 这会导致性能问题，尤其是在移动设备上，请忽略列表，因为我正在测试一些方法来滚动到 ListView 的索引。 源代码：

class _HomePageState extends State<HomePage> {
  final ScrollController _controller = ScrollController();
  final List<GlobalKey> _keys = [];

  @override
  Widget build(BuildContext context) {
    reset();
    _keys.clear();
    var size = MediaQuery.of(context).size;
    ScreenUtil.init(context, width: size.width, height: size.height);

    return Scaffold(
      body: Container(
          child: NotificationListener<OverscrollIndicatorNotification>(
              onNotification: (e) {
                e.disallowGlow();
                return false;
              },

              child: _buildBody()
          )
      ),
    );
  }

  Widget _buildBody(){
    return LayoutBuilder(
      builder: (context, constraints) {
        _initWebListeners(constraints);
        return ListView.builder(
          controller: _controller,
          physics: const AlwaysScrollableScrollPhysics(),
          itemBuilder: (var context, var index) {
            switch (index) {
              case 0: return WebNavigationBar(
                  key: GlobalKey()..addKeyToList(_keys),
                  keys: _keys
              );

              case 1:return WebAnnouncement(
                key: GlobalKey()..addKeyToList(_keys),
              );

              case 2: return WebPlayer(
                  key: GlobalKey()..addKeyToList(_keys),
                  link: 'https://i.imgur.com/VPTYKX2.mp4'
              );

              case 4: return WebIntroduction(
                key: GlobalKey()..addKeyToList(_keys),
              );

              case 6: return WebFeatures(
                key: GlobalKey()..addKeyToList(_keys),
              );

              case 8: return WebPricing(
                key: GlobalKey()..addKeyToList(_keys),
              );

              case 9: return WebFooter(
                key: GlobalKey()..addKeyToList(_keys),
              );
            }

            return WebDivider();
          },
          itemCount: 10
        );
      },
    );
  }
}

Answer 1

尝试将所有小部件放在一个列中。 然后将该列作为一个子项放在列表视图中。 它略微提高了性能。