前言

咱们在短视频运用中经常会看到不停上滑浏览下一条视频的沉溺式交互作用，这种交互能够让用户不停地翻页，直到找到喜欢的视频内容，从而营建一种不断“搜寻方针”的感觉，让用户欲罢不能。这种交互方式在 Flutter 中能够轻松运用 PageView 组件完成。

使用 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,
    this.allowImplicitScrolling = false,
    this.restorationId,
    this.clipBehavior = Clip.hardEdge,
    this.scrollBehavior,
    this.padEnds = true,
  })

其中常用的特点阐明如下：

  • scrollDirection：滑动方向，能够支撑纵向翻页或横向翻页，默认是横向翻页。
  • controller：翻页操控器，能够通过操控器来拟定初始页，以及跳转到具体的页面。
  • onPageChanged：翻页后的回调函数，会奉告翻页后的页码。
  • reverse：是否反向翻页，默认是 false。如果横向滑动翻页的话，如果开启反向翻页，则是从右到左翻页。如果是纵向翻页的话，就是从顶部到底部翻页。
  • children：在翻页中的组件列表，每一页都以自界说组件内容，因而这个组件也能够用于做引导页，或是相似滑动查看详情的作用。

运用示例

PageView 运用起来非常简略，咱们先界说一个PageView 翻页的内容组件，简略地将接收的图片文件满屏显现。代码如下，实际运用的时候能够根据需要换成其他自界说组件。

 class ImagePageView extends StatelessWidget {
  final String imageName;
  const ImagePageView({Key? key, required this.imageName}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Image.asset(
        imageName,
        fit: BoxFit.fitHeight,
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
      ),
    );
  }
}

之后是界说一个 PageViewDemo 来运用 PageView 翻页运用示例，代码如下：

class PageViewDemo extends StatefulWidget {
  const PageViewDemo({Key? key}) : super(key: key);
  @override
  State<PageViewDemo> createState() => _PageViewDemoState();
}
class _PageViewDemoState extends State<PageViewDemo> {
  late PageController _pageController;
  int _pageIndex = 1;
  @override
  void initState() {
    _pageController = PageController(
      initialPage: _pageIndex,
      viewportFraction: 1.0,
    );
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: PageView(
        scrollDirection: Axis.vertical,
        onPageChanged: (index) {
          _pageIndex = index;
        },
        controller: _pageController,
        allowImplicitScrolling: false,
        padEnds: true,
        reverse: false,
        children: const [
          ImagePageView(imageName: 'images/earth.jpeg'),
          ImagePageView(imageName: 'images/island-coder.png'),
          ImagePageView(imageName: 'images/mb.jpeg'),
        ],
      ),
    );
  }
}

这个示例里，咱们的 pageController 只是演示了设置初始页码。咱们看到的 viewportFraction 能够理解为一页内容占有屏幕的比例，比如咱们能够设置该数值为1/3，支撑一个屏幕分段显现3个页面内容。

使用 Flutter 轻松搞定短视频上滑翻页效果

PageController 运用

PageController 能够操控滑动到指定方位，比如咱们能够调用 animateToPage办法完成一个快速滑动到顶部的悬浮按钮。

floatingActionButton: FloatingActionButton(
    onPressed: () {
      _pageController.animateToPage(
        0,
        duration: const Duration(
          milliseconds: 1000,
        ),
        curve: Curves.easeOut,
      );
    },
    backgroundColor: Colors.black.withAlpha(180),
    child: const Icon(
      Icons.arrow_upward,
      color: Colors.white,
    ),
  ),

完成作用如下。

使用 Flutter 轻松搞定短视频上滑翻页效果
PageController 还有如下操控翻页的办法：

  • jumpToPage：跳转到指定页面，但是没有动画。留意这儿不会校验页码是否会超出范围。
  • nextPage：滑动到下一页，实际上调用的是 animateToPage 办法。
  • previousPage：滑动到上一页，实际上调用的是 animateToPage 办法。

总结

本篇介绍了 Flutter 的翻页组件 PageView 的运用，通过 PageView 能够轻松完成相似短视频的纵向上滑翻页的作用，也能够完成横向翻页作用（如阅读类软件）。在接下来的系列文章中，本专栏将会介绍更多 Flutter 实用的组件。

本篇源码已上传至：实用组件相关代码。

我是岛上码农，微信大众号同名。如有问题能够加本人微信沟通，微信号：island-coder。

：觉得有收成请点个赞鼓励一下！

：保藏文章，便利回看哦！

：评论沟通，相互前进！