为什么Flutter没有ListView.iterable()构造函数?

hjqgdpho  于 2023-10-22  发布在  Flutter
关注(0)|答案(1)|浏览(147)

主要是讨论,但真的。
我还没有在网上找到类似的东西,所以我想也许有一些性能击中或可能没有人没有尝试过。但如果没有,这个构造函数将非常有助于减少ListView的样板代码。
通常,在Flutter中,当我们使用ListView.builder()构造函数时,它看起来像这样:

@override
Widget build(BuildContext context) {
  final items = <ListItem>[
    // item 1,
    // item 2,
    // ... et cetera
  ];
  
  // ... code
  child: ListView.builder(
    itemBuilder: (context, index) => SomeFancyListTile(
      leading: Image.network(items[index].imageUrl),
      title: Text(items[index].title),
    ),
    itemCount: items.length,
  ),
  // ... more code
}

这是完全好的,但最近,我需要使用LinkedList修改基于相邻元素的小部件,它没有方便的[]操作符,但只有.elementAt(index)方法。然而,知道LinkedList s是如何构造的,代码在使用大型列表时将非常不优化(使整个列表花费O(n^2))。
但后来我想,它不需要这样,因为ListView一个接一个地呈现项目,这正是迭代器的工作方式。
因此,我实现了一个自定义的SliverChildDelegate,它确实做到了这一点--将迭代器的功能与ListView的呈现结合起来。它还提出了一些语法改进,减少了样板代码和每次访问列表项时使用的items[index]

import 'package:flutter/material.dart';

typedef ValueWidgetBuilder<T> = Widget Function(BuildContext context, T value);

class SliverIterableBuilderDelegate<T> extends SliverChildDelegate {
  SliverIterableBuilderDelegate(
    this.iterable, {
    required this.builder,
  }) : iterator = iterable.iterator;

  final Iterable<T> iterable;
  final ValueWidgetBuilder<T> builder;
  final Iterator<T> iterator;

  @override
  Widget? build(BuildContext context, int index) {
    if (index < 0 || index >= iterable.length) {
      return null;
    }

    if (iterator.moveNext()) {
      return builder(context, iterator.current);
    }

    return null;
  }

  @override
  bool shouldRebuild(covariant SliverChildDelegate oldDelegate) => true;
}

@override
Widget build(BuildContext context) {
  final items = <ListItem>[
    // item 1,
    // item 2,
    // ... et cetera
  ];
  
  // ... code
  child: ListView.custom(
    childrenDelegate: SliverIterableBuilderDelegate(
      builder: (context, value) => SomeFancyListTile(
        leading: Image.network(value.imageUrl),
        title: Text(value.title),
      ),
  ),
  // ... more code
}

所以,我想知道这种方法是否有一些缺点?另外,建议添加一个ListView.iterable()构造函数以进一步减少代码。

dgtucam1

dgtucam11#

这是一个很好的想法,但是这个实现不起作用。无论滚动方向如何,您都将调用Iterator.moveNext()。如果你有一个很长的列表,向下滚动很多,然后向上滚动,你会开始看到列表反向继续。我做了一个例子来展示这种行为,它可以直接复制粘贴到DartPad中:

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
Widget build(BuildContext context) {
  final items = List.generate(1000, (val) => val, growable: false);
  
  // ... code
  return ListView.custom(
    childrenDelegate: SliverIterableBuilderDelegate(
      items,
      builder: (context, value) => Text(
        value.toString()
      ),
  )
);}
}

typedef ValueWidgetBuilder<T> = Widget Function(BuildContext context, T value);

class SliverIterableBuilderDelegate<T> extends SliverChildDelegate {
  SliverIterableBuilderDelegate(
    this.iterable, {
    required this.builder,
  }) : iterator = iterable.iterator;

  final Iterable<T> iterable;
  final ValueWidgetBuilder<T> builder;
  final Iterator<T> iterator;

  @override
  Widget? build(BuildContext context, int index) {
    if (index < 0 || index >= iterable.length) {
      return null;
    }

    if (iterator.moveNext()) {
      return builder(context, iterator.current);
    }

    return null;
  }

  @override
  bool shouldRebuild(covariant SliverChildDelegate oldDelegate) => true;
}

最简单的解决方案是使用普通列表而不是链接列表,这样你就可以快速索引操作。

相关问题