Flutter 之 PageView 控件

相当于 Android 的 ViewPager 效果。不过 PageView 还带有垂直方向的滚动。

PageView

class _MyHomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: null,
        automaticallyImplyLeading: false,
        title: Text(widget.title),
      ),
      body: PageView(
        scrollDirection: Axis.horizontal,
        reverse: false,
        controller: PageController(
          initialPage: 0,
          viewportFraction: 1,
          keepPage: true,
        ),
        physics:BouncingScrollPhysics(),
        pageSnapping: true,
        onPageChanged: (index) {
          //监听事件
          print('index=====$index');
        },
        children: [
          Container(
            color: Colors.tealAccent,
            child: Center(
              child: Text(
                '第1页',
                style: TextStyle(color: Colors.black, fontSize: 18.0),
              ),
            ),
          ),
          Container(
            color: Colors.greenAccent,
            child: Center(
              child: Text(
                '第2页',
                style: TextStyle(color: Colors.black, fontSize: 20.0),
              ),
            ),
          ),
          Container(
            color: Colors.deepOrange,
            child: Center(
              child: Text(
                '第3页',
                style: TextStyle(color: Colors.black, fontSize: 20.0),
              ),
            ),
          )
        ],
      ),
    );
  }
}

1. scrollDirection

滚动方向,分为 Axis.horizontal 和 Axis.vertical。

2. reverse

反转，是否从最后一个开始算0

3. controller

PageController 控制初始化第几个，占屏幕的范围。

• initialPage 初始化第一次默认在第几个。
• viewportFraction 占屏幕多少，1为占满整个屏幕
• keepPage
  是否保存当前 Page 的状态，如果保存，下次回复对应保存的 page，initialPage被忽略，如果为 false 。下次总是从 initialPage 开始。

4. physics

滚动的方式

• BouncingScrollPhysics 阻尼效果
• ClampingScrollPhysics 水波纹效果

5. pageSnapping

是否具有回弹效果，默认为 true

6. onPageChanged

监听事件

7. children

具体子控件的布局

最后效果。左右可滑动

image.png

轮播图

在 Flutter 里面 可以 通过 Timer.periodic 来做定时器。所以上面代码加个定时器就可以做成轮播图了。代码如下：

class _MyHomePageState extends State {
  PageController _pageController;
  Timer _timer;
  int _index = 0;
  @override
  void initState() {
    super.initState();
    _pageController = PageController(
      initialPage: _index, //默认在第几个
      viewportFraction: 1, // 占屏幕多少，1为占满整个屏幕
      keepPage: true, //是否保存当前 Page 的状态，如果保存，下次回复保存的那个 page，initialPage被忽略，
      //如果为 false 。下次总是从 initialPage 开始。
    );
    _timer = Timer.periodic(const Duration(seconds: 2),(timer){
      _index++;
      _pageController.animateToPage(
        _index % 3,//跳转到的位置
        duration: Duration(milliseconds: 16),//跳转的间隔时间
        curve: Curves.fastOutSlowIn,//跳转动画
      );
    });
  }
  @override
  void dispose() {
    _pageController.dispose();
    _timer.cancel();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: null,
        automaticallyImplyLeading: false,
        title: Text(widget.title),
      ),
      body: PageView(
        scrollDirection: Axis.horizontal,
        reverse: false,
        controller: _pageController,
        physics:BouncingScrollPhysics(),
        pageSnapping: true,
        onPageChanged: (index) {
          print('index=====$index');
        },
        children: [
          Container(
            color: Colors.tealAccent,
            child: Center(
              child: Text(
                '第1页',
                style: TextStyle(color: Colors.black, fontSize: 18.0),
              ),
            ),
          ),
          Container(
            color: Colors.greenAccent,
            child: Center(
              child: Text(
                '第2页',
                style: TextStyle(color: Colors.black, fontSize: 20.0),
              ),
            ),
          ),
          Container(
            color: Colors.deepOrange,
            child: Center(
              child: Text(
                '第3页',
                style: TextStyle(color: Colors.black, fontSize: 20.0),
              ),
            ),
          )
        ],
      ),
    );
  }
}

在定时器回调里面，调用 PageController.animateToPage 就可以切换到指定的 Page 。