3-2.基础组件二【PageView】-用途轮播图 - 《Flutter》

PageView
- 基本用法
- 基本属性
PageView.builder 实现无限轮播
flutter_swiper 实现轮图">结合 flutter_swiper 实现轮图
">

PageView

基本用法

PageView(
  scrollDirection :  Axis.horizontal, // 主轴方向
  controller : PageController( // 设置子元素沾满多少
    viewportFraction : 0.9
  ),
  reverse : false,    // 颠倒顺序   
  physics: ScrollPhysics(),
  pageSnapping : true,  // 断裂 如false则就不是一快一块来滑动了。
  allowImplicitScrolling : true,
  children: <Widget>[
    _Container( Colors.yellow[200] ),
    _Container( Colors.green[300] ),
    _Container( Colors.blue[400] ),
    _Container( Colors.grey[500] ),
    _Container( Colors.pink[600] ),
    _Container( Colors.orange[700] ),
  ],
   onPageChanged: (e){
       print("this is onPageChanged! $e");
   },
)

基本属性

  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,
    this.allowImplicitScrolling = false,
  }) : assert(allowImplicitScrolling != null),
       controller = controller ?? _defaultPageController,
       childrenDelegate = SliverChildListDelegate(children),
       super(key: key);

PageView.builder 实现无限轮播

基本用法

    List _pageList = [
        _Container( Colors.yellow[200] ),
        _Container( Colors.green[300] ),
        _Container( Colors.blue[400] ),
        _Container( Colors.grey[500] ),
        _Container( Colors.pink[600] ),
        _Container( Colors.orange[700] ),
      ];
PageView.builder(
  controller : PageController(
    viewportFraction : 0.9
  ),
  // typedef IndexedWidgetBuilder = Widget Function(BuildContext context, int index);
  itemBuilder: (context,index){
    return _pageList[index % _pageList.length];
  },
  itemCount : 2000 // 项目个数，不要设置为佳
)

基本属性

PageView.builder({
    Key key,
    this.scrollDirection = Axis.horizontal,
    this.reverse = false,
    PageController controller,
    this.physics,
    this.pageSnapping = true,
    this.onPageChanged,
    @required IndexedWidgetBuilder itemBuilder,
    int itemCount,
    this.dragStartBehavior = DragStartBehavior.start,
    this.allowImplicitScrolling = false,
  }) : assert(allowImplicitScrolling != null),
       controller = controller ?? _defaultPageController,
       childrenDelegate = SliverChildBuilderDelegate(itemBuilder, childCount: itemCount),
       super(key: key);

示例

class ExchangeScene extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _ViewPageState();
}
class _ViewPageState extends State<ExchangeScene> {
  var imgList = [
    'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=904970218,1071764187&fm=11&gp=0.jpg',
    'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3398997146,632450674&fm=11&gp=0.jpg',
    "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2988284211,4212612697&fm=11&gp=0.jpg",
    "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1356733267,2792424737&fm=11&gp=0.jpg",
  ];
  PageController _pageController;
  var _currPageValue = 0.0;
  //缩放系数
  double _scaleFactor = .8;
  //view page height
  double _height = 230.0;
  @override
  void initState() {
    super.initState();
    _pageController = PageController(viewportFraction: 0.9);
    _pageController.addListener(() {
      setState(() {
        _currPageValue = _pageController.page;
      });
    });
  }
  @override
  void dispose() {
    super.dispose();
    _pageController.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          width: 300,
          height: 100,
        ),
        Container(
        height: _height,
          child: PageView.builder(
          itemBuilder: (context, index) => _buildPageItem(index),
          itemCount: 1000,
          controller: _pageController,
        )),
      ],
    );
  }
  _buildPageItem(int index) {
    Matrix4 matrix4 = Matrix4.identity();
    if (index == _currPageValue.floor()) {
      //当前的item
      var currScale = 1 - (_currPageValue - index) * (1 - _scaleFactor);
      var currTrans = _height * (1 - currScale) / 2;
      matrix4 = Matrix4.diagonal3Values(1.0, currScale, 1.0)
        ..setTranslationRaw(0.0, currTrans, 0.0);
    } else if (index == _currPageValue.floor() + 1) {
      //右边的item
      var currScale =
          _scaleFactor + (_currPageValue - index + 1) * (1 - _scaleFactor);
      var currTrans = _height * (1 - currScale) / 2;
      matrix4 = Matrix4.diagonal3Values(1.0, currScale, 1.0)
        ..setTranslationRaw(0.0, currTrans, 0.0);
    } else if (index == _currPageValue.floor() - 1) {
      //左边
      var currScale = 1 - (_currPageValue - index) * (1 - _scaleFactor);
      var currTrans = _height * (1 - currScale) / 2;
      matrix4 = Matrix4.diagonal3Values(1.0, currScale, 1.0)
        ..setTranslationRaw(0.0, currTrans, 0.0);
    } else {
      //其他，不在屏幕显示的item
      matrix4 = Matrix4.diagonal3Values(1.0, _scaleFactor, 1.0)
        ..setTranslationRaw(0.0, _height * (1 - _scaleFactor) / 2, 0.0);
    }
    return Transform(
      transform: matrix4,
      child: Stack(children: <Widget>[
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 10),
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(12),
              image: DecorationImage(
                  image: NetworkImage(imgList[index % 4]), fit: BoxFit.fill),
            ),
          ),
        ),
      ],)
    );
  }
}

结合 flutter_swiper 实现轮图

class ExchangeScene extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _ViewPageState();
}
class _ViewPageState extends State<ExchangeScene> {
  var imgList = [
    'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=904970218,1071764187&fm=11&gp=0.jpg',
    'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3398997146,632450674&fm=11&gp=0.jpg',
    "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2988284211,4212612697&fm=11&gp=0.jpg",
    "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1356733267,2792424737&fm=11&gp=0.jpg",
  ];
  PageController _pageController;
  var _currPageValue = 0.0;
  //缩放系数
  double _scaleFactor = .8;
  //view page height
  double _height = 230.0;
  @override
  void initState() {
    super.initState();
    _pageController = PageController(viewportFraction: 0.9);
    _pageController.addListener(() {
      setState(() {
        _currPageValue = _pageController.page;
      });
    });
  }
  @override
  void dispose() {
    super.dispose();
    _pageController.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          width: 300,
          height: 100,
        ),
        Container(
        height: _height,
          child: PageView.builder(
          itemBuilder: (context, index) => _buildPageItem(index),
          itemCount: 1000,
          controller: _pageController,
        )),
         Container(
          height: 300,
          // width: 300,
          child: Swiper(
           itemBuilder: (context, index) => _buildPageItem(index),
           autoplay : true,
           itemCount: 100000,
           duration : 1000,
           viewportFraction: 0.8,
           scale: 0.9,
        )
,
        )
      ],
    );
  }
  _buildPageItem(int index) {
    Matrix4 matrix4 = Matrix4.identity();
    if (index == _currPageValue.floor()) {
      //当前的item
      var currScale = 1 - (_currPageValue - index) * (1 - _scaleFactor);
      var currTrans = _height * (1 - currScale) / 2;
      matrix4 = Matrix4.diagonal3Values(1.0, currScale, 1.0)
        ..setTranslationRaw(0.0, currTrans, 0.0);
    } else if (index == _currPageValue.floor() + 1) {
      //右边的item
      var currScale =
          _scaleFactor + (_currPageValue - index + 1) * (1 - _scaleFactor);
      var currTrans = _height * (1 - currScale) / 2;
      matrix4 = Matrix4.diagonal3Values(1.0, currScale, 1.0)
        ..setTranslationRaw(0.0, currTrans, 0.0);
    } else if (index == _currPageValue.floor() - 1) {
      //左边
      var currScale = 1 - (_currPageValue - index) * (1 - _scaleFactor);
      var currTrans = _height * (1 - currScale) / 2;
      matrix4 = Matrix4.diagonal3Values(1.0, currScale, 1.0)
        ..setTranslationRaw(0.0, currTrans, 0.0);
    } else {
      //其他，不在屏幕显示的item
      matrix4 = Matrix4.diagonal3Values(1.0, _scaleFactor, 1.0)
        ..setTranslationRaw(0.0, _height * (1 - _scaleFactor) / 2, 0.0);
    }
    return Transform(
      transform: matrix4,
      child: Stack(children: <Widget>[
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 10),
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(12),
              image: DecorationImage(
                  image: NetworkImage(imgList[index % 4]), fit: BoxFit.fill),
            ),
          ),
        ),
      ],)
    );
  }
}