Flutter组件————PageView

PageView

可以创建滑动页面效果的widget，它允许用户通过水平或垂直滑动手势在多个子页面（child widgets）之间切换。每个子页面通常占据屏幕的全部空间。

参数

PageController

PageController 是 Flutter 中用于控制 PageView 的一个类，它允许开发者编程式地管理页面的滚动行为。
PageController 是 Flutter 中用于控制 PageView 的一个类，它允许开发者编程式地管理页面的滚动行为。通过 PageController，你可以设置初始页面、跳转到特定页面、监听页面变化等。以下是关于 PageController 的一些重要属性和方法介绍：

构造函数

• PageController({int initialPage = 0, double viewportFraction = 1.0}):
  • initialPage: 设置 PageView 初始显示的页面索引，默认为0。
  • viewportFraction: 每个页面占据视口的比例，默认值为1.0，即每个页面占据整个屏幕宽度或高度。

属性

• hasClients: 返回一个布尔值，表示是否有任何 PageView 使用此控制器。
• position: 获取与该控制器关联的 ScrollPosition 对象，可以用来获取当前滚动位置的信息。

方法

• animateTo(double offset, {Duration duration, Curve curve}):

  • 动画滚动到指定的偏移量（以像素为单位）。需要提供滚动动画的持续时间和曲线类型。

• jumpTo(double offset):

  • 立即滚动到指定的偏移量（以像素为单位），没有动画效果。

• animateToPage(int page, {Duration duration, Curve curve}):

  • 动画滚动到指定的页面索引。同样需要提供滚动动画的持续时间和曲线类型。

• jumpToPage(int page):

  • 立即滚动到指定的页面索引，没有动画效果。

• nextPage({Duration duration, Curve curve}):

  • 动画滚动到下一页。需要提供滚动动画的持续时间和曲线类型。

• previousPage({Duration duration, Curve curve}):

  • 动画滚动到上一页。同样需要提供滚动动画的持续时间和曲线类型。

• dispose():

  • 释放控制器资源，当不再需要控制器时应该调用此方法，避免内存泄漏。

physics

physics 是一个非常重要的属性，它定义了滚动视图（如 ListView, GridView, PageView 等）的滚动行为。
在 Flutter 中，physics 是一个非常重要的属性，它定义了滚动视图（如 ListView, GridView, PageView 等）的滚动行为。通过设置不同的 ScrollPhysics 子类，你可以改变用户与滚动视图交互时的行为特性。以下是几种常用的 ScrollPhysics 实现及其功能：

常用的 ScrollPhysics 实现

1. ClampingScrollPhysics

   • 这是 Android 平台默认的滚动物理效果。当滚动超出范围时，内容不会继续滚动，并且没有反弹效果。

2. RangeMaintainingScrollPhysics

   • 适用于 iOS 平台，默认情况下，当滚动超出范围时，内容会回弹并返回到范围内。它继承自 ClampingScrollPhysics 并添加了额外的功能来保持滚动位置。

3. AlwaysScrollableScrollPhysics

   • 使得滚动视图总是可以滚动，即使其内容不足以填满整个视图。这对于实现类似于拖拽刷新的效果很有用。

4. NeverScrollableScrollPhysics

   • 完全禁用了滚动行为，即使内容超出了视图的边界，也无法通过手势进行滚动。

5. BouncingScrollPhysics

   • 类似于 iOS 的滚动行为，当滚动超出范围时，内容会有一个反弹效果然后回到范围内。

6. FixedExtentScrollPhysics

   • 用于 ListWheelScrollView 或其他固定高度或宽度项的滚动视图，提供了一种特殊的滚动感觉，每个项目占据相同的屏幕空间。

7. PageScrollPhysics

   • 专门为 PageView 设计，提供了页面级别的滚动和吸附效果，确保每次滚动都会停留在一个完整的页面上。

8. CustomScrollPhysics

   • 如果内置的物理效果无法满足需求，开发者可以通过继承 ScrollPhysics 来创建自定义的滚动物理效果。

示例代码

class CompentPage extends StatefulWidget {
  const CompentPage({super.key});

  @override
  _CompentPageState createState() => _CompentPageState();
}
final PageController pageController = PageController(initialPage: 0);
List<Widget> pageList = const [
  Row(
    children: [Text("1"), Text("2"), Text("3"), Text("4"), Text("5")],
  ),
  Row(
    children: [Text("6"), Text("7"), Text("8"), Text("9"), Text("10")],
  ),
  Row(
    children: [Text("11"), Text("12"), Text("13"), Text("14"), Text("15")],
  ),
  Row(
    children: [Text("16"), Text("17"), Text("18"), Text("19"), Text("20")],
  )
];

class _CompentPageState extends State<CompentPage> {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        const Text(
          "PageView",
          style: TextStyle(fontSize: 20, color: Colors.blue),
        ),
        SizedBox(
          height: 200,
          child: PageView(
            scrollDirection: Axis.horizontal, // 滚动方向,
            reverse: false,  // 是否反向滚动
            controller: pageController, // 页面控制器
            physics: const PageScrollPhysics(), // 滚动物理
            pageSnapping: true, // 用户停止滚动后“吸附”到最接近的页面边界
            allowImplicitScrolling: true, // 允许隐式滚动
            onPageChanged: (index) => {debugPrint("当前页面索引:$index")}, // 页面切换事件
            children: pageList, // 页面列表
          ),
        ),
        ElevatedButton(onPressed: (){pageController.animateToPage(3, duration: const Duration(microseconds: 400), curve: Curves.easeInOut);}, child: const Text("跳转到第三"))
      ],
    );
  }
}

效果

点击按钮后