Flutter: 无限滚动

为什么需要无限滚动

之前做过一个横向图片展示的页面,发现就需要无限滚动(可以往左滑,也可以往右滑).第一时间首先想到的是用PageView,但是发现PageView不支持往左滑动,只能往右滑.这明显限制了功能的实用性.

于是在网上参考了一些教程之后,有了下面的代码.

image-3198

原理

原理其实很简单,就是初始化的时候给PageView设置一个特别大的值.这样无论往左或者往右都可以滑动.通过滑动的值,计算实际的下标,进行展示对应的数据即可.

在线运行效果

源码

源码如下:


import 'package:flutter/material.dart';

/// run to dartpad.dev or dartpad.cn
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
        home: HomePage(),
      );
}

int maxPage = 2000000000;

class HomePage extends StatelessWidget {
  static const List<Color> _colors = [Colors.blue, Colors.green, Colors.red];

  final pageController = new PageController(initialPage: maxPage);

  @override
  Widget build(BuildContext context) => Scaffold(
        body: PageView.builder(
          controller: pageController,
          itemBuilder: (BuildContext context, int index) {
            var renderIndex = index - maxPage;
            renderIndex = renderIndex % _colors.length;
            if (renderIndex < 0) {
              renderIndex += _colors.length;
            }
            return Container(
              color:_colors[index % _colors.length],
                child: Center(
                    child: Text("text $renderIndex, default Index: $index",
                        style: TextStyle(
                            fontSize: 36.0,
                            color: Colors.white))));
          },
        ),
      );
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据