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")
              )
            ],

          ),
        ),
      ),
    );
相关推荐
tangweiguo030519871 小时前
Flutter 数据存储的四种核心方式 · 从 SharedPreferences 到 SQLite:Flutter 数据持久化终极整理
flutter
0wioiw01 小时前
Flutter基础(②④事件回调与交互处理)
flutter
肥肥呀呀呀2 小时前
flutter配置Android gradle kts 8.0 的打包名称
android·flutter
吴Wu涛涛涛涛涛Tao6 小时前
Flutter 实现「可拖拽评论面板 + 回复输入框 + @高亮」的完整方案
android·flutter·ios
星秋Eliot1 天前
Flutter多线程
flutter·async/await·isolate·flutter 多线程
农夫三拳_有点甜1 天前
Flutter Assets & Media
flutter
林间风雨2 天前
flutter项目 -- 换logo、名称 、签名、打包
flutter
SoaringHeart2 天前
Flutter组件封装:页面点击事件拦截
前端·flutter
tangweiguo030519872 天前
Flutter与原生混合开发:实现完美的暗夜模式同步方案
android·flutter