Flutter组件————PageView

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

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> {@overrideWidget 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("跳转到第三"))],);}
}

效果

点击按钮后