Flutter学习日记-PageView

1.PageView

  PageView({
    Key key,
    this.scrollDirection = Axis.horizontal,
    this.reverse = false,
    PageController controller,
    this.physics,
    this.pageSnapping = true,
    this.onPageChanged,
    List<Widget> children = const <Widget>[],
    this.dragStartBehavior = DragStartBehavior.start,
  }) 

• pageSnapping ，默认为true,让pageView具有分页效果，滚到超到View页面一半，就会滚动到下一页，小于则停留在当前页；设置为false，则滚到哪里算哪里，没有分页效果。
• reverse ，子视图倒置展示
• scrollDirection ，滚动方向
• onPageChanged,滚动会得到当前的索引值,默认从0开始，0，1，2...
• PageController controller ,是描述 pageView 子视图的widget,

 PageController({
    this.initialPage = 0,
    this.keepPage = true,
    this.viewportFraction = 1.0,
  }) 

• initialPage,默认显示第一个视图，可自定义设置索引值；
• keepPage,是否保持已经渲染过得页面
• viewportFraction,视图默认100%撑开显示，0-1，如果当前滚动方向为水平方向，会以宽度的%比，来缩放视图；如果当前滚动方向为垂直方向，会以高度的%比，来缩放视图

2.PageView.builder

按需加载内容和视图数量

PageView.builder(
      itemBuilder: _pageItemBuilder,
      itemCount: posts.length,
    );

学习应用：

• SafeArea，里面的源码就是利用MediaQuery

• MediaQuery.of(context).padding.bottom

看具体情况使用！！！

具体代码如下：

class ViewDemo extends StatelessWidget {
//实现动态加载视图方法
  Widget _pageItemBuilder(BuildContext context, int index) {
  <!---实例1
  采用SafeArea 来包裹视图，防止底部视图被遮挡，IphoneX系列
  ->
//    return SafeArea(
//        child: Stack(
//      children: <Widget>[
//        SizedBox.expand(
//          child: Image.network(
//            posts[index].imageUrl,
//            fit: BoxFit.cover,
//          ),
//        ),
//        Positioned(
//            left: 8.0,
//            bottom: 8.0,
//            child: Column(
//              crossAxisAlignment: CrossAxisAlignment.start,
//              children: <Widget>[
//                Text(
//                  posts[index].title,
//                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16.0),
//                ),
//                Text(
//                  posts[index].author,
//                  style: TextStyle(),
//                ),
//              ],
//            )),
//      ],
//    ));
<!--实例2
 底部为了防止遮挡，采用  MediaQuery.of(context).padding.bottom  获取底部padding高度，
 来动态计算，类似IphoneX系列手机有高度，其他为0
-->
    return Stack(
      children: <Widget>[
        SizedBox.expand(
          child: Image.network(
            posts[index].imageUrl,
            fit: BoxFit.cover,
          ),
        ),
        Positioned(
          left: 8.0,
          bottom: 8.0 + MediaQuery.of(context).padding.bottom,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                posts[index].title,
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16.0),
              ),
              Text(
                posts[index].author,
                style: TextStyle(),
              ),
            ],
          ),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    <!---入口->
    return PageView.builder(
    <!---具体实现看上面代码->
      itemBuilder: _pageItemBuilder, 
      <!--posts为数据源文件List数组，可以忽略，理解意思就行-->
      itemCount: posts.length,
    );
  }
}

学习过程，先过一遍，之前笔记很少粘贴代码，代码会让人看懵，没有代码也懵，但是学习过程中实操代码有点乱，后续会抽时间整理一下开源出来。

路漫漫其修远兮，吾将上下而求索
                        ——致程序员逝去的青春