Flutter 自定义ScrollPhysics实现PageView禁止左滑或右滑

xhu_ww

已于 2024-05-06 20:48:35 修改

阅读量3.9k

点赞数 3

分类专栏： Flutter 文章标签： flutter PageView ScrollPhysics 禁止PageView左滑禁止PageView右滑

于 2022-06-30 11:17:47 首次发布

本文链接：https://blog.youkuaiyun.com/ww897532167/article/details/125520964

版权

本文介绍了如何在Flutter中自定义ScrollPhysics，以实现PageView禁止左滑或右滑的功能。通过分析ClampingScrollPhysics的源码，了解到在applyBoundaryConditions方法中判断是否到达边界并返回相应的值可以控制滑动。通过创建CustomScrollPhysicsController并继承自ClampingScrollPhysics，实现了根据需求禁止单向滑动的PageView效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1 PageView禁止左滑或右滑效果图
2 PageView
- 2.1 PageView示例
- 2.2 ScrollPhysics
3 自定义ScrollPhysics实现PageView禁止左滑或右滑
- 3.1 ClampingScrollPhysics源码
- 3.2 自定义ScrollPhysics

1 PageView禁止左滑或右滑效果图

在这里插入图片描述

2 PageView

PageView可实现Widget的整页滑动切换，可用于轮播图、App左右切换TAB页面、引导页切换页面等场景。

2.1 PageView示例

class PageViewPage extends StatefulWidget {
   
  const PageViewPage({
   Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _PageViewPageState();
}

class _PageViewPageState extends State<PageViewPage> {
   
  @override
  Widget build(BuildContext context) {
   
    return Scaffold(
      body: PageView(
        children: List.generate(3, _buildChildPage),
      ),
    );
  }

  Widget _buildChildPage(int index) {
   
    return Container(
      color: Colors.primaries[index * 2],
      child: Center(
        child: Text(
          'Page  $index',
          style: const TextStyle(color: Colors.white, fontSize: 24),
        ),
      ),
    );
  }
}