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

效果

点击按钮后

相关推荐
m0_7482478011 小时前
Flutter Intl包使用指南:实现国际化和本地化
前端·javascript·flutter
迷雾漫步者20 小时前
Flutter组件————FloatingActionButton
前端·flutter·dart
coder_pig1 天前
📝小记:Ubuntu 部署 Jenkins 打包 Flutter APK
flutter·ubuntu·jenkins
捡芝麻丢西瓜1 天前
flutter自学笔记5- dart 编码规范
flutter·dart
恋猫de小郭1 天前
什么?Flutter 可能会被 SwiftUI/ArkUI 化?全新的 Flutter Roadmap
flutter·ios·swiftui
sunly_2 天前
Flutter:导航,tab切换,顶部固定,列表分页滚动
开发语言·javascript·flutter
敲代码的小强2 天前
Flutter项目兼容鸿蒙Next系统
flutter·华为·harmonyos
Zh-jie3 天前
flutter 快速实现侧边栏
前端·javascript·flutter
truemi.733 天前
flutter --no-color pub get 超时解决方法
android·flutter