vue 左右滑动切换div_Flutter PageView左右滑动切换视图

最新推荐文章于 2024-07-04 18:23:55 发布

凳子独立开发

最新推荐文章于 2024-07-04 18:23:55 发布

阅读量618

点赞数

文章标签： vue 左右滑动切换div

本文链接：https://blog.csdn.net/weixin_32097465/article/details/112214871

版权

本文介绍如何使用 Flutter 的 PageView 组件实现页面的整页横向切换，包括基本使用方法和案例实战，详细讲解了 controller、pageList 的设置，以及结合 Stack 和 Positionned 显示圆点指示器。

摘要由CSDN通过智能技术生成

本文将通过 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 pageList=[];  /// 初始化控制器  PageController pageController;  @override  void initState() {    super.initState();    ///创建控制器的实例    pageController = new PageController(      ///用来配置PageView中默认显示的页面 从0开始      initialPage: 0,      ///为true是保持加载的每个页面的状态      k