和 Android 中的 ViewPager 一样，不赘述。

构造方法

PageView({
  Key key,
  this.scrollDirection = Axis.horizontal,
  this.reverse = false,
  PageController controller,
  this.physics,
  this.pageSnapping = true,
  this.onPageChanged,
  List<Widget> children = const <Widget>[],
  this.dragStartBehavior = DragStartBehavior.start,
})

• scrollDirection，滚动方向
• reverse，是否和阅读方向一样的滚动
• controller，控制器
• physics，页面视图如何响应用户输入
• pageSnapping，使用自定义滚动时禁止页面捕捉
• onPageChanged，页面切换回调
• children，页面（组件）列表，页面个数等于长度
• dragStartBehavior，拖拽行为

创建方法

除了构造方法之外，PageView 和 ListView、GridView 一样，也有单独的创建方法：

• PageView.builder，用于创建大量或无限的子控件
• PageView.custom，自定义 Page

这两个创建方法和 ListView 的没差别。

构造方法

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("PageView"),
      ),
      body: Container(
        height: 200,
        child: PageView(
          children: getViews(5),
        ),
      ),
    );
  }

  List<Widget> getViews(int pageCount) {
    List<Widget> list = List<Widget>();
    for (var i = 0; i < pageCount; i++) {
      list.add(Container(
        margin: EdgeInsets.fromLTRB(10, 10, 10, 10),
        child: Text("${i}"),
        alignment: Alignment.center,
        constraints: BoxConstraints(
          maxHeight: 200,
          minHeight: 200,
        ),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(50)),
            color: Colors.deepOrange),
      ));
    }
    return list;
  }
}

PageView.builder

      body: Container(
        height: 200,
        child: PageView.builder(
          itemBuilder: (BuildContext context, int i) {
            return Container(
              margin: EdgeInsets.fromLTRB(10, 10, 10, 10),
              child: Text("${i}"),
              alignment: Alignment.center,
              constraints: BoxConstraints(
                maxHeight: 200,
                minHeight: 200,
              ),
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(50)),
                  color: Colors.deepOrange),
            );
          },
          itemCount: 5,
        ),
      ),

PageView.custom

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("PageView"),
      ),
      body: Container(
        height: 200,
        child: PageView.custom(
          childrenDelegate: SliverChildListDelegate.fixed(
            getViews(5),
          ),
        ),
      ),
    );
  }

  List<Widget> getViews(int pageCount) {
    List<Widget> list = List<Widget>();
    for (var i = 0; i < pageCount; i++) {
      list.add(Container(
        margin: EdgeInsets.fromLTRB(10, 10, 10, 10),
        child: Text("${i}"),
        alignment: Alignment.center,
        constraints: BoxConstraints(
          maxHeight: 200,
          minHeight: 200,
        ),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(50)),
            color: Colors.deepOrange),
      ));
    }
    return list;
  }
}

上面三个例子的效果是一样的：

PageController

PageView 有一个 controller 属性，它是一个 PageController 对象，它控制了 PageView 的初始化、切换以及动画效果等等。

构造方法

  PageController({
    this.initialPage = 0,
    this.keepPage = true,
    this.viewportFraction = 1.0,
  })

• initialPage，初始页面

• keepPage，使用 PageStorage 保存当前页面，如果重新创建此控制器的可滚动页面将其还原。

  如果将此属性设置为 false，则从不保存当前页面，并且始终使用 initialPage 初始化滚动偏移量。 如果为true（默认值），第一次创建控制器的可滚动对象时将使用初始页面。 随后将恢复保存的页面，并忽略initialPage。

• viewportFraction，每个页面应占用的视口部分，取值 0~1 之间。

属性

• page，表示当前 PageView 显示的页面位置

• offset，偏移量

• position，ScrollView 的实际滚动偏移量。

方法

• animateToPage，带动画跳转到第 X 页，
• jumpToPage，直接跳转到第 X 页
• nextPage，下一页
• previousPage，上一页

示例

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'dart:async';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var _pageController =
      PageController(initialPage: 0, viewportFraction: 0.8, keepPage: false);

  @override
  void initState() {
    super.initState();
    Timer timer = Timer.periodic(Duration(seconds: 1),(Timer timer){
      if(_pageController.page == 4){
        _pageController.jumpToPage(0);
      }else{
        _pageController.nextPage(duration: Duration(milliseconds: 500), curve: Curves.easeInOut);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("PageView"),
      ),
      body: Container(
        height: 200,
        child: PageView.custom(
          controller: _pageController,
          childrenDelegate: SliverChildListDelegate.fixed(
            getViews(5),
          ),
        ),
      ),
    );
  }

  List<Widget> getViews(int pageCount) {
    List<Widget> list = List<Widget>();
    for (var i = 0; i < pageCount; i++) {
      list.add(Container(
        margin: EdgeInsets.fromLTRB(10, 10, 10, 10),
        child: Text("${i}"),
        alignment: Alignment.center,
        constraints: BoxConstraints(
          maxHeight: 200,
          minHeight: 200,
        ),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(50)),
            color: Colors.deepOrange),
      ));
    }
    return list;
  }
}

自动循环播放，达到最后一页时，跳转到第一页，效果如图：