Flutter--PageView学习

一、PageView的介绍

PageView：滑动视图列表，类型Android的ViewPage控件，不过PageView支持上下滑动，可制作轮播图。

二、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);

三、PageView的属性说明

3.1、PageView的属性说明

属性	说明
scrollDirection	滑动反向 Axis.vertical上下滑动 Axis.horizontal左右滑动
reverse	是否反转 true从最后一个记0
controller	PageController见下文
physics	滚动方式
pageSnapping	是否有回弹效果
onPageChanged	监听切换
children	子组件
dragStartBehavior	处理拖拽开始行为方式

3.2、PageController的属性说明

属性	说明
initialPage	初始化第一次默认在第几个
	keepPage	是否保存当前 Page 的状态 true下次回复对应保存的 page，initialPage被忽略 false总是从 initialPage 开始
viewportFraction	占屏幕多少，1为占满整个屏幕

四、PageView的demo

4.1、PageView的简单使用

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

          ),
        ),
      ),
    );

4.2、

PageView添加指示器及无限滚动

class _ViewPagerStudyState extends State<ViewPagerStudy> {
  List<Widget> pageList = [
    Page(name: "我是页面A", mColor: Colors.red),
    Page(name: "我是页面B", mColor: Colors.blue),
    Page(name: "我是页面C", mColor: Colors.green)
  ];
  int _nowIndex = 0;

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("PageView无限滚动"),
          ),
          body: Stack(
            alignment: Alignment.bottomCenter,
            children: [
              PageView.builder(
                  onPageChanged: (int index) {
                    setState(() {
                      _nowIndex = index % pageList.length;
                    });
                  },
                  itemCount: 1000,
                  itemBuilder: (context, index) {
                    return pageList[index % pageList.length];
                  }),
              //指示器
              Positioned(
                bottom: 10,
                child: Row(
                    children: List.generate(pageList.length, (index) {
                  return Container(
                    margin: EdgeInsets.all(10),
                    width: 10,
                    height: 10,
                    decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        color: _nowIndex == index
                            ? Colors.amberAccent
                            : Colors.white),
                  );
                }).toList()),
              ),
            ],
          )),
    );
  }
}

class Page extends StatelessWidget {
  String name;
  Color mColor;

  Page({Key key, this.name, this.mColor}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: mColor,
      child: Text(
        "${this.name}",
        style: TextStyle(color: Colors.white),
      ),
    );
  }
}