Open gaowei1012 opened 4 years ago
进阶用法
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,
));
}
自定义用法
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,
));
}
基本使用