Flutter组件———

Flutter组件————PageView

news2024/12/24 5:50:03

PageView

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

参数

参数名	类型	描述
`children`	`List<Widget>`	包含在 `PageView` 中的所有子部件（页面）。仅适用于页面数量较少的情况。
`scrollDirection`	`Axis`	定义滚动的方向，默认为水平方向 (`Axis.horizontal`)，也可以设置为垂直方向 (`Axis.vertical`)。
`reverse`	`bool`	如果设置为 `true`，则滚动方向将被反转。例如，默认情况下是从左到右滚动，如果此值为 `true`，则会从右到左滚动。
`controller`	`PageController?`	用于控制 `PageView` 的页面控制器，允许编程方式改变当前显示的页面或监听页面变化。
`physics`	`ScrollPhysics?`	滚动物理特性，定义了用户与 `PageView` 交互时的行为，比如是否允许拖拽、弹回等。
`pageSnapping`	`bool`	如果设置为 `true`，页面会在用户停止滚动后“吸附”到最接近的页面边界；否则，页面可以在任意位置停止。
`onPageChanged`	`ValueChanged<int>?`	当页面切换时调用的回调函数，参数为新的页面索引。
`restorationId`	`String?`	用于保存和恢复 `PageView` 状态的标识符，有助于应用在重启后恢复到之前的状态。
`dragStartBehavior`	`DragStartBehavior`	定义了拖动手势开始的方式。默认值是 `DragStartBehavior.start`。
`clipBehavior`	`Clip`	定义子部件超出 `PageView` 边界时的行为，如剪裁、不剪裁等。
`allowImplicitScrolling`	`bool`	是否允许隐式滚动。当 `true` 时，某些手势（如双击空格键在文本字段中）可能会触发滚动。

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 实现

ClampingScrollPhysics
- 这是 Android 平台默认的滚动物理效果。当滚动超出范围时，内容不会继续滚动，并且没有反弹效果。
RangeMaintainingScrollPhysics
- 适用于 iOS 平台，默认情况下，当滚动超出范围时，内容会回弹并返回到范围内。它继承自 ClampingScrollPhysics 并添加了额外的功能来保持滚动位置。
AlwaysScrollableScrollPhysics
- 使得滚动视图总是可以滚动，即使其内容不足以填满整个视图。这对于实现类似于拖拽刷新的效果很有用。
NeverScrollableScrollPhysics
- 完全禁用了滚动行为，即使内容超出了视图的边界，也无法通过手势进行滚动。
BouncingScrollPhysics
- 类似于 iOS 的滚动行为，当滚动超出范围时，内容会有一个反弹效果然后回到范围内。
FixedExtentScrollPhysics
- 用于 ListWheelScrollView 或其他固定高度或宽度项的滚动视图，提供了一种特殊的滚动感觉，每个项目占据相同的屏幕空间。
PageScrollPhysics
- 专门为 PageView 设计，提供了页面级别的滚动和吸附效果，确保每次滚动都会停留在一个完整的页面上。
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("跳转到第三"))
      ],
    );
  }
}