Swiper 组件

[gaowei1012]

基本使用

Container(

                /// 宽度
                width: MediaQuery.of(context).size.width,
                height: 120,
                margin: EdgeInsets.only(bottom: 20),
                child: Swiper(
                  itemCount: 3, // 轮播个数
                  loop: true, // 循环播放
                  autoplay: true, // 自动轮播
                  scrollDirection: Axis.horizontal, // 轮播方向 ho
                  itemBuilder: _swiperBuilder,
                  /// 指示器
                  pagination: SwiperPagination(
                      builder: DotSwiperPaginationBuilder(
                          color: Colors.black12, activeColor: Colors.white)),
                  // control: SwiperControl(),
                )),


/// 循环内容
  Widget _swiperBuilder(BuildContext context, int index) {
    return (Image.network(
      'http://via.placeholder.com/350x150',
      fit: BoxFit.fill,
    ));
  }

[gaowei1012]

进阶用法

Container(
              width: MediaQuery.of(context).size.width,
              height: 200,
              margin: EdgeInsets.only(bottom: 20),
              child: Swiper(
                itemCount: 6,
                autoplay: true,
                loop: true,

                /// 内建样式
                layout: SwiperLayout.STACK,
                itemWidth: 300,
                itemHeight: 400,
                scrollDirection: Axis.horizontal,
                itemBuilder: _swiperBuilderB,
                pagination: SwiperPagination(
                    builder: DotSwiperPaginationBuilder(
                        color: Colors.black12, activeColor: Colors.white)),
              ),
            )


  Widget _swiperBuilderB(BuildContext context, int index) {
    return (Image.network(
      'http://via.placeholder.com/350x150',
      fit: BoxFit.fill,
    ));
  }

[gaowei1012]

自定义用法

Container(
              width: MediaQuery.of(context).size.width,
              height: 160,
              child: Swiper(
                itemCount: 6,
                loop: true,
                autoplay: true,
                layout: SwiperLayout.CUSTOM,
                itemWidth: 300,
                itemHeight: 160,
                itemBuilder: _swiperBuilderC,
                scrollDirection: Axis.horizontal,
                pagination: SwiperPagination(
                    builder: DotSwiperPaginationBuilder(
                        color: Colors.black12, activeColor: Colors.white)),

                /// 自定义轮播效果
                /// 描述布局和动画
                customLayoutOption: CustomLayoutOption(
                        startIndex: -1, stateCount: 3)
                    .addRotate([-45.0 / 100, 0.0, 45.0 / 100]).addTranslate([
                  Offset(-370.0, -40.0),
                  Offset(0.0, 0.0),
                  Offset(370.0, -40.0)
                ]),
              ),
            )


Widget _swiperBuilderC(BuildContext context, int index) {
    return (Image.network(
      'http://via.placeholder.com/350x150',
      fit: BoxFit.fill,
    ));
  }