Flutter Listview.builder全面解析

Flutter是一款UI开发框架，由Google推出，使用它可以快速构建高质量的原生界面。其中的Listview.builder是非常强大的一个控件，在开发中经常会用到。下面我们将从多个方面对其进行详细介绍，包括定义、参数、用法、优缺点等。

一、定义

ListView.builder是Flutter框架中的一个控件，用于在界面上显示一组类似于列表的数据。它与ListView的区别在于， builder不需要在构造函数中传入列表数据。而是需要您提供一个函数，在每次需要使用新数据时，该函数将自动调用。

二、参数

我们来看一下ListView.builder构造函数的参数，以便更好的理解其使用方法。主要包含以下4个参数：

ListView.builder({
  Key? key,
  required this.itemBuilder,  //当ListView重新构建时，将创建一个新的项。
  this.scrollDirection = Axis.vertical,//滚动方向。默认是垂直方式
  this.controller, //与ListView关联的控制器。用于监听列表滚动位置等事件。
  this.primary, //是否强制ListView的滚动视图和外层的PrimaryScrollController保持一致。
  this.physics,//列表的滚动行为，例如滚动到边缘时的动画效果等。
  this.shrinkWrap = false,//如果为true，则会围绕其子项尽可能紧密包装。如果为false，则会扩展以适合其父级。
  this.padding, //用于在ListView周围添加空白间距、分割线等的填充
  this.itemExtent, //子项的固定高度。如果设置了这个属性，那么itemBuilder参数必须null，
  this.semanticChildCount,//语义子项的数量
  this.dragStartBehavior = DragStartBehavior.start,//确定拖动启动行为是由GestureDetector开始还是由它的父Editor外面的开始手势开始的
  this.keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,//确定键盘按键时滚动视图的行为。 
})

三、用法

1、基本使用

让我们从基本示例开始。下面的代码演示了如何使用builder创建一个简单的ListView。这个示例中，它只显示一个字符串列表。

  ListView.builder(
    itemCount: items.length,//条目数量
    itemBuilder: (BuildContext context, int index) => ListTile(title: Text('${items[index]}')),
  )

其中，itemCount为列表中的条目数量，itemBuilder是一个函数，用于创建新的子项。例如，每当需要一个新的子项时，该函数将被调用，并将创建一个新的子项，然后将其添加到列表中。

2、添加分割线

我们可以在ListView.builder中传入Divider控件来为列表添加分隔符。方法如下：

  ListView.builder(
    itemCount: items.length,
    itemBuilder: (BuildContext context, int index) {
      return Column(
        children: [
          ListTile(title: Text('${items[index]}')),
          Divider(),
        ],
      );
    },
  )

  

3、滚动到指定位置

我们在列表中添加一个FloatingActionButton控件，可以实现当点击按钮时，ListView.builder将滚动到顶部。实现代码如下：

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  final ScrollController _scrollController = ScrollController();

  void _scrollToTop() {
    _scrollController.animateTo(0, duration: Duration(seconds: 1), curve: Curves.easeInOut);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ListView.builder示例"),
      ),
      body: ListView.builder(
        controller: _scrollController,
        itemCount: items.length,
        itemBuilder: (BuildContext context, int index) {
          return Column(
            children: 
   [
              ListTile(title: Text('${items[index]}')),
              Divider(),
            ],
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _scrollToTop,
        tooltip: 'Scroll to top',
        child: Icon(Icons.arrow_upward),
      ),
    );
  }
}

   
  

4、下拉刷新

我们可以使用RefreshIndicator控件，在ListView.builder中实现下拉刷新的效果。下面是一个示例：

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  final ScrollController _scrollController = ScrollController();

  // 刷新列表，更新数据
  Future
    _handleRefresh() async {
    // 为模拟刷新效果，让线程停留两秒钟
    await Future.delayed(Duration(seconds: 2));

    setState(() {
      items.clear();
      items.addAll(new List.generate(30, (index) => "Item $index"));
    });

    return null;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ListView.builder示例"),
      ),
      body: RefreshIndicator(
        onRefresh: _handleRefresh,
        child: ListView.builder(
          controller: _scrollController,
          itemCount: items.length,
          itemBuilder: (BuildContext context, int index) {
            return Column(
              children: 
    [
                ListTile(title: Text('${items[index]}')),
                Divider(),
              ],
            );
          },
        ),
      ),
    );
  }
}

    
   
  

5、无限滚动

有时，我们想要在滚动列表时按需加载更多数据。ListView.builder提供了一个onEndReached回调函数，使我们能够在用户滚到列表的末尾时，自动加载更多数据。这里是一个实现无限滚动的示例：

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  final ScrollController _scrollController = ScrollController();

  // 加载更多数据
  void _loadMore() {
    setState(() {
      items.addAll(newList);
      newList.clear(); 
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ListView.builder示例"),
      ),
      body: ListView.builder(
        controller: _scrollController,
        itemCount: items.length + 1,
        itemBuilder: (BuildContext context, int index) {
          if (index == items.length) {
            return Container(
              padding: EdgeInsets.symmetric(vertical: 32.0),
              alignment: Alignment.center,
              child: CircularProgressIndicator(),
            );
          }
          final item = items[index];
          return Column(
            children: 
   [
              ListTile(title: Text('$item')),
              Divider(),
            ],
          );
        },
        // 滚动到指定位置时 触发加载更多操作
        onEndReached: _loadMore,
      ),
    );
  }
}

   
  

四、优缺点

1、优点

ListView.builder控件的优点主要集中在如下几方面：

• 适用于大规模数据显示，支持高效的滚动性能
• 不需要通过直接传入List的方式来构建列表，而是使用builder创建新的列表项，更加方便灵活
• 可以添加分割线、下拉刷新、无限滚动等其他功能，提升用户体验
• 可以自由设置列表的滚动行为，例如动画速度、滚动到顶部或底部，使得交互效果更加自然顺畅

2、缺点

虽然ListView.builder控件拥有很多优点，但还是存在一些缺点需要我们注意：

• 在创建新的列表项时，需要不断调用itemBuilder函数，因此可能会导致一定的性能问题
• 需要深入理解ListView.builder的使用方法和属性含义，否则容易出现错误或较低的生产效率
• 如果列表中的每个子项的大小大小不一致，则可能导致滚动性能问题

结语

本文对ListView.builder控件进行了全面的介绍，包括定义、参数、用法、优缺点等。通过学习这些内容，相信大家对ListView.builder有了更加深入的了解，可以更好的在实际中应用这个控件，提升Flutter开发的生产效率。