一、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的属性说明

3.2、PageController的属性说明

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

          ),
        ),
      ),
    );

7276bc59a958f21769ed76defed1580.png

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),
      ),
    );
  }
}

892c5266fe52c9548a752904dbcef45.png