flutter Pageview组件

PageView组件说明

组件说明
PageView，PageController的源码
简单demo

组件说明

属性	说明
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 children = const [],//子组件
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")
              )
            ],

          ),
        ),
      ),
    );