flutter Pageview组件

PageView组件说明

组件说明

属性 说明
scrollDirection 滑动反向 Axis.vertical上下滑动 Axis.horizontal左右滑动
reverse 是否反转 true从最后一个记0
controller PageController见下文
physics 滚动方式
pageSnapping 是否有回弹效果
onPageChanged 监听切换
children 子组件
dragStartBehavior 处理拖拽开始行为方式
  • PageController的属性说明
属性 说明
initialPage 初始化第一次默认在第几个
keepPage 是否保存当前 Page 的状态 true下次回复对应保存的 page initialPage被忽略 false总是从 initialPage 开始
viewportFraction 占屏幕多少,1为占满整个屏幕

PageView,PageController的源码

  • 2.1、PageView源码

    PageView({
    Key? key,
    this.scrollDirection = Axis.horizontal,//滑动方向
    this.reverse = false,//是否反转,true 从最后一个记0
    PageController? controller,//控制初始化
    this.physics,//滚动方式
    this.pageSnapping = true,//是否有回弹效果
    this.onPageChanged,//监听切换
    List<Widget> children = const <Widget>[],//子组件
    this.dragStartBehavior = DragStartBehavior.start,//处理拖拽开始行为方式
    this.allowImplicitScrolling = false,
    this.restorationId,
    this.clipBehavior = Clip.hardEdge,
    }) : assert(allowImplicitScrolling != null),
    assert(clipBehavior != null),
    controller = controller ?? _defaultPageController,
    childrenDelegate = SliverChildListDelegate(children),
    super(key: key);

  • 2.2 PageController的源码

    PageController({
    this.initialPage = 0,//初始化第一次默认在第几个
    this.keepPage = true,//是否保存当前 Page 的状态,如果保存,下次回复对应保存的 page,initialPage被忽略,如果为 false 。下次总是从 initialPage 开始
    this.viewportFraction = 1.0,//占屏幕多少,1为占满整个屏幕
    }) : assert(initialPage != null),
    assert(keepPage != null),
    assert(viewportFraction != null),
    assert(viewportFraction > 0.0);

简单demo

复制代码
return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("PageView学习"),
        ),
        body: Center(
          child: PageView(
            scrollDirection: Axis.horizontal,
            reverse: false,
            controller: PageController(
              initialPage: 1,
              keepPage: false,
              viewportFraction: 0.8

            ),
            children: [
              Container(
                color: Colors.red,
                child: Text("我是页面0"),
              ),
              Container(
                color: Colors.blue,
                child: Text("我是页面1"),
              ),
              Container(
                color: Colors.green,
                child: Text("我是页面2")
              )
            ],

          ),
        ),
      ),
    );
相关推荐
孤鸿玉13 小时前
Fluter InteractiveViewer 与ScrollView滑动冲突问题解决
flutter
叽哥19 小时前
Flutter Riverpod上手指南
android·flutter·ios
BG1 天前
Flutter 简仿Excel表格组件介绍
flutter
zhangmeng2 天前
FlutterBoost在iOS26真机运行崩溃问题
flutter·app·swift
恋猫de小郭2 天前
对于普通程序员来说 AI 是什么?AI 究竟用的是什么?
前端·flutter·ai编程
卡尔特斯2 天前
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