Flutter PageView左右滑动切换视图

本文将通过 PageView 实现页面的整页横向切换。

在这里插入图片描述


1 PageView 的基本使用

  ///封装方法构建PageView组件
  PageView buildBodyFunction() {
    ///可实现左右页面滑动切换
    return PageView(
      //当页面选中后回调此方法
      //参数[index]是当前滑动到的页面角标索引 从0开始
      onPageChanged: (int index){
        print("当前的页面是 $index");
        ///滑动PageView时,对应切换选择高亮的标签
        setState(() {
          currentSelectIndex = index;
        });
      },
      //值为flase时 显示第一个页面 然后从左向右开始滑动
      //值为true时 显示最后一个页面 然后从右向左开始滑动
      reverse: false,
      //滑动到页面底部无回弹效果
      physics: BouncingScrollPhysics(),
      //横向滑动切换
      scrollDirection: Axis.horizontal,
      //页面控制器
      controller: pageController,
      //所有的子Widget
      children: pageList,
    );
  }
}

controller 与pageList


  ///当前显示标签页面的标识 
  int currentSelectIndex = 0;
  ///保存页面的List
  List<Widget> pageList=[];
  /// 初始化控制器
  PageController pageController;

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

    ///PageView设置滑动监听
    pageController.addListener(() {
      //PageView滑动的距离
      double offset = pageController.offset;
      print("pageView 滑动的距离 $offset");
    });

    ///保存标签页面
    pageList=[
      LeftPage(),
      RightPage(),
    ];
  }

使用 controller 来实现PageView的整屏切换

pageController.animateTo(
			MediaQuery.of(context).size.width*currentSelectIndex, 
			duration: Duration(milliseconds: 200), 
			curve: Curves.linear);

使用PageView滑动到顶部

pageController.animateTo(
			0, 
			duration: Duration(milliseconds: 200), 
			curve: Curves.linear);

2 案例实战 使用PageView实现引导页面

在这里插入图片描述

首先是通过 Stack 将圆点指示器 与 PageView 叠在一起显示,如下代码清单2-1所示:


///代码清单 2-1 
class LeftPageViewPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new LeftPageViewPageState();
  }
}

class LeftPageViewPageState extends State<LeftPageViewPage> {


  ///控制器
  final PageController _controller = new PageController();
 
  ///可滑动的页面 使用到的图片
  final List<String> _pages = <String>[
    "http://b-ssl.duitang.com/uploads/item/201311/02/20131102150044_YGB5u.jpeg",
    "http://b-ssl.duitang.com/uploads/item/201311/02/20131102150044_YGB5u.jpeg",
    "http://b-ssl.duitang.com/uploads/item/201311/02/20131102150044_YGB5u.jpeg",
  ];

  
  @override
  Widget build(BuildContext context) {
    ///层叠布局
    return new Stack(
      children: <Widget>[
        //底层的PageView 
        buildPageView(),
        //表层的圆点指示器
        buildPositioned(),
      ],
    );
  }
}

通过 buildPageView 方法来构建一个 PageView ,如下代码清单 2-2 所示:

///代码清单 2-2
  ///构建 PageView 
  PageView buildPageView() {
    ///懒加载模式构建
    return PageView.builder(
      ///设置滑动模式
      physics: new AlwaysScrollableScrollPhysics(),
      ///添加控制器
      controller: _controller,
      ///构建每一屏的视图 UI 
      itemBuilder: (BuildContext context, int index) {
        return buildItemWidget(index);
      },
      ///条目个数
      itemCount: _pages.length,
    );
  }

PageView 通过 itemBuilder 属性来构建每一屏页面显示UI,在这里通过 buildItemWidget 方法封装构建如下代码清单2-3所示:

///代码清单 2-3
  ///构建每一页的Item UI效果
  Widget buildItemWidget(int index){
    return new ConstrainedBox(
      constraints: const BoxConstraints.expand(),
      ///网络图片
      child: Image.network(
        ///图片地址
        _pages[index],
        ///加载中的占位
        loadingBuilder: (BuildContext context,
            Widget child,
            ImageChunkEvent loadingProgress) {
          ///这里使用了一个进度圆圈
          return new SizedBox(
            width: 24.0,
            height: 24.0,
            child: new CircularProgressIndicator(
              strokeWidth: 2.0,
            ),
          );
        },),
    );
  }

通过方法 buildPositioned 来 结合Positioned 使用圆点组件在 Stack 中底部对齐,如下代码清单 2-4所示:

  ///代码清单 2-4
  ///表层的圆点指示器
  Positioned buildPositioned() {
    return new Positioned(
      ///底部对齐
        bottom: 0.0, left: 0.0,right: 0.0,
        child: new Container(
          color: Colors.white,
          padding: const EdgeInsets.all(20.0),
          child: new Center(
            ///自定义的圆点切换指示器
            child: buildDotsIndicator(),
          ),
        ),
      );
  }

buildDotsIndicator 方法用来构建建表层的圆点指示器,如下代码清单 2-5所示:

  ///代码清单 2-5
   ///自定义的圆点切换指示器
  DotsIndicator buildDotsIndicator() {
    return new DotsIndicator(
      ///与PageView联动的控制器
        controller: _controller,
        ///小圆点的个数
        itemCount: _pages.length,
        ///点击小圆点的回调
        onPageSelected: (int pageIndex) {
          ///主动切换页面
          _controller.animateToPage(
            pageIndex,
            duration: Duration(milliseconds: 300),
            curve: Curves.ease,
          );
        });
  }

对于 DotsIndicator 是自定义的一个 AnimatedWidget,如下代码清单2-6所示:

///代码清单 2-6
class DotsIndicator extends AnimatedWidget {
  DotsIndicator({
    this.controller,
    this.itemCount,
    this.onPageSelected,
    this.color: Colors.red,
  }) : super(listenable: controller);

  final PageController controller;

  final int itemCount;

  final ValueChanged<int> onPageSelected;

  final Color color;

  static const double _kDotSize = 8.0;

  static const double _kMaxZoom = 2.0;

  static const double _kDotSpacing = 25.0;

  Widget _buildDot(int index) {
    double selectedness = Curves.easeOut.transform(
      max(
        0.0,
        1.0 - ((controller.page ?? controller.initialPage) - index).abs(),
      ),
    );
    double zoom = 1.0 + (_kMaxZoom - 1.0) * selectedness;
    return new Container(
      width: _kDotSpacing,
      child: new Center(
        child: new Material(
          color: color,
          type: MaterialType.circle,
          child: new Container(
            width: _kDotSize * zoom,
            height: _kDotSize * zoom,
            child: new InkWell(
              onTap: () => onPageSelected(index),
            ),
          ),
        ),
      ),
    );
  }

  Widget build(BuildContext context) {
    return new Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: new List<Widget>.generate(itemCount, _buildDot),
    );
  }
}


【1】 目前在西瓜视频上免费刊登 Flutter 系列教程,每日更新,欢迎关注接收提醒点击查看提示

在这里插入图片描述


【2】 本公众号会首发系列专题文章,付费的视频课程会在公众号中免费刊登,在你上下班的路上或者是睡觉前的一刻,本公众号都是你浏览知识干货的一个小选择,收藏不如行动,在那一刻,公众号会提示你该学习了。
在这里插入图片描述

早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页