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 来创建自定义的滚动物理效果。

示例代码

dart 复制代码
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("跳转到第三"))
      ],
    );
  }
}

效果

点击按钮后

相关推荐
孤鸿玉9 小时前
Fluter InteractiveViewer 与ScrollView滑动冲突问题解决
flutter
叽哥16 小时前
Flutter Riverpod上手指南
android·flutter·ios
BG1 天前
Flutter 简仿Excel表格组件介绍
flutter
zhangmeng1 天前
FlutterBoost在iOS26真机运行崩溃问题
flutter·app·swift
恋猫de小郭1 天前
对于普通程序员来说 AI 是什么?AI 究竟用的是什么?
前端·flutter·ai编程
卡尔特斯1 天前
Flutter A GlobalKey was used multipletimes inside one widget'schild list.The ...
flutter
w_y_fan2 天前
Flutter 滚动组件总结
前端·flutter
醉过才知酒浓2 天前
Flutter Getx 的页面传参
flutter
火柴就是我3 天前
flutter 之真手势冲突处理
android·flutter
Speed1233 天前
`mockito` 的核心“打桩”规则
flutter·dart