Flutter中的PageView使用方法

pageView参数

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,  //拖拽行为
  })

后面两种方式去除重复数据

PageView.builder({
    //...
    @required IndexedWidgetBuilder itemBuilder,  //创建item，根据回调index返回不同页面
    int itemCount,  //item数量
    //...
  })

第三种是自定义模式

PageView.custom({
    //...
    @required this.childrenDelegate,  //自定义模式接受一个子页面委托对象
    //...
  })

这里主要以PageView.builder介绍一下PageView的使用

使用

///组件使用
PageView.builder(
  itemBuilder: (context, index) {
  return Center(
    child: _getPageByIndex(index),  //每个页面展示的组件
  );
  },
  itemCount: 4, //页面数量
  onPageChanged: _onPageChange, //页面切换
  controller: _pageController, //控制器)//返回每个页面子组件StatefulWidget _getPageByIndex(int index) {
  switch (index) {
    case 0:
      return HomePage();
    case 1:
      return CategoryPage();
    case 2:
      return MeiZiPage();
    case 3:
      return AccountPage();
    default:
      return HomePage();
  }}

关于controller

 PageController({
    this.initialPage = 0,    //初始化选择页面
    this.keepPage = true,    //是否保持已经渲染过得页面
    this.viewportFraction = 1.0,  //每个页面应占用的视口部分。 0~1之间
  })

在是使用PageView的时候会包含一个默认的控制器

var _pageController = PageController(initialPage: 0);

控制器跳转有4个已有的方法

• animateToPage：带动画跳转

• jumpToPage：直接改变当前页面无动画

• nextPage：下一页

• previousPage：上一页