Flutter PageView使用详细概述

Vedu • 2020-11-16 06:54 • 技术资讯 • 阅读 1918

优美的应用体验来自于细节的处理，更源自于码农的自我要求与努力，当然也需要码农年轻灵活的思维，不局限于思维，不局限语言限制，才是编程的最高境界。

本文章讲述 Flutter 跨平台开发中 PageView的详细配置使用。

PageView可用于Widget的整屏滑动切换，如当代常用的短视频APP中的上下滑动切换的功能，也可用于横向页面的切换，如APP第一次安装时的引导页面，也可用于开发轮播图功能

在这里我们以单页面作为启动应用程序Demo，构建如下：

//应用入口
void main() {
  ///启动根目录
  runApp(MaterialApp(
    theme: ThemeData(primaryColor: Colors.grey[200]),
    home: Example508(),
  ));
}

///代码清单 5-34 PageView的基本使用
///lib/code/code5/example_508_PageView.dart
class Example508 extends StatefulWidget {
  @override
  State createState() {
    return _ExampleState();
  }
}

定义一个PageController，用来操作PageView或者监听PageView ，初始化方法如下：

class _ExampleState extends State<Example508> {
  /// 初始化控制器
  PageController pageController;

  //PageView当前显示页面索引
  int currentPage = 0;

  @override
  void initState() {
    super.initState();

    //创建控制器的实例
    pageController = new PageController(
      //用来配置PageView中默认显示的页面 从0开始
      initialPage: 0,
      //为true是保持加载的每个页面的状态
      keepPage: true,
    );

    ///PageView设置滑动监听
    pageController.addListener(() {
      //PageView滑动的距离
      double offset = pageController.offset;
      //当前显示的页面的索引
      double page = pageController.page;
      print("pageView 滑动的距离 $offset  索引 $page");
    });
  }

当然在这里的Demo小编写成的是纵向的滑动，如这样的纵向滑动的一般是如整屏视屏播放，然后上下滑动切换。

然后在页面的主体我们就是构建了一个PageView，其详细概述如下：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("PageView "),
    ),
    body: Container(
      height: 200,
      child: PageView.builder(
        //当页面选中后回调此方法
        //参数[index]是当前滑动到的页面角标索引 从0开始
        onPageChanged: (int index) {
          print("当前的页面是 $index");
          currentPage = index;
        },
        //值为flase时 显示第一个页面 然后从左向右开始滑动
        //值为true时 显示最后一个页面 然后从右向左开始滑动
        reverse: false,
        //滑动到页面底部无回弹效果
        physics: BouncingScrollPhysics(),
        //纵向滑动切换
        scrollDirection: Axis.vertical,
        //页面控制器
        controller: pageController,
        //所有的子Widget
        itemBuilder: (BuildContext context, int index) {
          return Container(
            //缩放的图片
            width: MediaQuery.of(context).size.width,
            child: Image.asset(
              "assets/images/2.0x/banner3.webp",
            ),
          );
        },
      ),
    ),
    floatingActionButton: FloatingActionButton(
      child: Icon(Icons.arrow_upward),
      onPressed: () {
        //
        if (currentPage > 0) {
          //滚动到上一屏
          pageController.animateToPage(
            currentPage - 1,
            curve: Curves.ease,
            duration: Duration(milliseconds: 200),
          );
        }
      },
    ),
  );
}

在这里的 floatingActionButton 悬浮按钮小编只是写了一个控制PageView上滑一个页面的功能，是PageController来操作的，详细方法描述如下：

void pageViewController() {
  //动画的方式滚动到指定的页面
  pageController.animateToPage(
    //子Widget的索引
    0,
    //动画曲线
    curve: Curves.ease,
    //滚动时间
    duration: Duration(milliseconds: 200),
  );

  //动画的方式滚动到指定的位置
  pageController.animateTo(
    100,
    //动画曲线
    curve: Curves.ease,
    //滚动时间
    duration: Duration(milliseconds: 200),
  );

  //无动画切换到指定的页面
  pageController.jumpToPage(0);
  //无动画 切换到指定的位置
  pageController.jumpTo(100);
}

大家可以根据实际业务场景灵活应用，小编在这里提供思路与方法，如有疑问，你可以回复小编。

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/tech/14592.html

Flutter PageView使用详细概述

相关推荐

发表评论