在文件pubspec.yaml中添加轮播的依赖组件:
#轮播组件
flutter_swiper: ^1.0.6
示例代码:
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
class SwipBannerPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return SwipBannerState();
}
}
class SwipBannerState extends State<SwipBannerPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("轮播组件"),
),
//MediaQuery.of(context).size.width 铺满全屏
body: Container(
width: MediaQuery.of(context).size.width,
height: 220.0,
child: Swiper(
itemCount: 3,
itemBuilder: _itemBuilder,
pagination: SwiperPagination(
builder: DotSwiperPaginationBuilder(
activeColor: Colors.white, color: Colors.black54)),
control: SwiperControl(),
scrollDirection: Axis.horizontal,
autoplay: true,
onTap: (index) => print('点击了第$index个'),
),
),
);
}
Widget _itemBuilder(BuildContext context, int index) {
return Image.network(
"https://wanandroid.com/blogimgs/bfcf57e5-aa5d-4ca3-9ca9-245dcbfd31e9.png",
fit: BoxFit.fill,
);
}
}
网友评论