Flutter 中如何实现无限滚动？

推荐答案

在 Flutter 中实现无限滚动通常使用 ListView.builder 或 GridView.builder，结合 ScrollController 来监听滚动事件，并在接近列表底部时加载更多数据。以下是一个简单的实现示例：

-- -------------------- ---- -------
----- --------------------- ------- -------------- -
  ---------
  --------------------------- ------------- -- ------------------------------
-

----- --------------------------- ------- ---------------------------- -
  ----- ---------------- ----------------- - -------------------
  --------- ----- - ----------------- ------- -- -------
  ---- --------- - ------

  ---------
  ---- ----------- -
    ------------------
    -----------------------------------------
  -

  ---------
  ---- --------- -
    ----------------------------
    ----------------
  -

  ---- ----------- -
    -- ---------------------------------- -- ------------------------------------------ -- ----------- -
      ----------- -
        --------- - -----
      ---

      -- --------
      -------------------------------- --- -- -
        ----------- -
          ------------------------------ ------- -- ------------ - --------
          --------- - ------
        ---
      ---
    -
  -

  ---------
  ------ ------------------ -------- -
    ------ ---------
      ------- -------
        ------ -------------- ------ ----------
      --
      ----- -----------------
        ----------- ------------------
        ---------- ------------ - --
        ------------ --------- ------ -
          -- ------ -- ------------- -
            ------ -------
              ------ ----------------------------
            --
          -
          ------ ---------
            ------ ---------- ------------------
          --
        --
      --
    --
  -
-

本题详细解读

1. 使用 ListView.builder 或 GridView.builder

ListView.builder 和 GridView.builder 是 Flutter 中用于构建动态列表和网格的组件。它们通过 itemBuilder 回调函数动态生成子组件，适合处理大量数据或无限滚动场景。

2. 使用 ScrollController 监听滚动事件

ScrollController 用于监听滚动位置的变化。通过 addListener 方法，可以在用户滚动时触发回调函数。在回调函数中，可以判断当前滚动位置是否接近列表底部，从而触发加载更多数据的操作。

3. 加载更多数据的逻辑

在 _loadMore 方法中，首先检查当前滚动位置是否已经到达列表底部（即 _scrollController.position.pixels == _scrollController.position.maxScrollExtent）。如果满足条件，并且当前没有正在加载数据（!isLoading），则开始加载更多数据。

4. 显示加载指示器

在 ListView.builder 的 itemBuilder 中，当 index 等于 items.length 时，表示已经到达列表末尾，此时显示一个加载指示器（如 CircularProgressIndicator），提示用户正在加载更多数据。

5. 异步加载数据

在实际应用中，加载更多数据通常是一个异步操作。可以使用 Future.delayed 模拟异步加载，或者通过 Future 从网络或数据库获取数据。加载完成后，更新数据列表并刷新 UI。

通过以上步骤，可以在 Flutter 中实现一个简单的无限滚动列表。