Flutter: 无限滚动

为什么需要无限滚动

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

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

原理

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

在线运行效果

源码

源码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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))));

          },

        ),

      );

}