时间戳

首页 > 解决方案 > 如何制作从中心开始的listview.builder builder？

flutter - 如何制作从中心开始的listview.builder builder？

问题描述

我正在制作一个从外部数据库查询数据的应用程序，该数据库返回按日期排序的 100 个事件列表。（50 个未来日期，50 个过去日期）

然后主页会呈现一个 Listview.builder，其中填充了 ExpansionTile，然后将其显示给用户。

关键是，我们将屏幕上的第一个项目设置为项目编号 51。这意味着从那时起，它下面将显示项目 52、53、54 等等。

但是，当用户向上滚动时，我们希望显示项目 50、49、48 等，而不是典型的 Listview.Builder 触发物理刷新。

关于如何实现它的任何想法？这个想法是基本上总是首先显示今天的事件，但用户可以无缝浏览未来的事件和过去的事件

这并没有达到预期的结果，因为它最终会出现“中断”

class MyApp extends StatelessWidget {
  final List<int> nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  final List<int> nums2 = [11, 12, 13, 14, 15, 16, 17, 18, 19, 20];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: Column(
          children: <Widget>[
            Expanded(
              child: Container(
                child: ListView.builder(
                  itemCount: nums.length,
                  itemBuilder: (BuildContext context, int index) {
                    return ExpansionTile(
                      title: Text('${nums[index]}'),
                    );
                  },
                ),
              ),
            ),
            Expanded(
              child: Container(
                child: ListView.builder(
                  itemCount: nums2.length,
                  itemBuilder: (BuildContext context, int index) {
                    return ExpansionTile(
                      title: Text('${nums2[index]}'),
                    );
                  },
                ),
              ),
            )
          ],
        ),
      ),
);

} }

标签： flutter

解决方案

如果您能找到更好的解决方案，请告诉我。

如果您的列表是无限的或很长，您可以将您的第一项设置为第 5000 项，如果您到达第一项（我的意思是在尝试查看以前的项目时），您应该获取（显示）更多数据，例如...，第 4998 次第 4999 次。

滚动的想法来自这个博客

我更改了您的代码来完成这项工作，但考虑到我也在寻找更好的解决方案。

其他小部件，如：ListWheelScrollView并且PageView如果它们适合，可以用来代替 listview。

import 'package:flutter/material.dart';

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

class _MyAppState extends State<MyApp> {
  List<int> nums;
  ScrollController ctrl;
  double start;
  bool isScroll = true;
  double end;

  @override
  void initState() {
    nums = List.generate(100, (i) => 4990 + i);
    ctrl = ScrollController(initialScrollOffset: 10 * 80.0)
      ..addListener(() {
        // fetch if ite reaches the end or start
        if (ctrl.offset == ctrl.position.minScrollExtent) {
          nums.insert(0, nums.first - 1);
          // ctrl.jumpTo(80.0 * 10);

          setState(() {});
        } else if (ctrl.offset == ctrl.position.maxScrollExtent) {
          nums.add(nums.last + 1);
          setState(() {});
        }
      });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
          body: NotificationListener<ScrollNotification>(
        onNotification: (Notification notification) {
          if (notification is ScrollStartNotification) {
            start = notification.metrics.pixels;
            isScroll = false;
          } else if (!isScroll && notification is ScrollEndNotification) {
            end = notification.metrics.pixels;
            isScroll = true;

            double d = (end - start);
            // 80 is the items height
            double offset = d.abs() ~/ 80 * 80.0;
            if (d % 80.0 > 40) offset += 80.0;
            if (d.isNegative)
              ctrl.jumpTo(start - offset);
            else
              ctrl.jumpTo(start + offset);
          }
          return true;
        },
        child: ListView.builder(
          itemExtent: 80.0,
          controller: ctrl,
          itemCount: nums.length,
          itemBuilder: (BuildContext context, int index) {
            return ExpansionTile(
              title: Text('${nums[index]}'),
            );
          },
        ),
      )),
    );
  }
}

对于获取行为，这完全取决于您的偏好，如果到达第一个项目或第 10 个项目然后获取新项目，您可以执行此操作，或者每次执行 10 次左右而不是获取（显示）一个项目。

推荐阅读