image.png
效果图.gif
吾生也有涯，而知也无涯，以有涯随无涯，殆己！
首页轮播图
# 轮播图
flutter_swiper: ^1.1.4
/// banner组件
Widget getBanner(List<CourseBanner> courseBannerList) {
return Container(
height: ScreenUtil().setHeight(250),
// 高度 插件 flutter_screenutil
child: Swiper(
scrollDirection: Axis.horizontal,
// 横向
itemCount: courseBannerList.length,
// 数量
autoplay: true,
// 自动翻页
itemBuilder: (BuildContext context, int index) {
//banner item 布局
return Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(courseBannerList[index].img),
fit: BoxFit.fill),
borderRadius: BorderRadius.all(Radius.circular(10))),
);
},
// 构建
onTap: (index) {
NavigatorUtils.goWebViewPage(context, courseBannerList[index].title,
courseBannerList[index].url);
print('点击了第${index}');
},
// 点击事件 onTap
pagination: SwiperPagination(
// 分页指示器
alignment: Alignment.bottomCenter,
// 位置 Alignment.bottomCenter 底部中间
margin: const EdgeInsets.fromLTRB(0, 0, 0, 5),
// 距离调整
builder: DotSwiperPaginationBuilder(
// 指示器构建
space: ScreenUtil().setWidth(5),
// 点之间的间隔
size: ScreenUtil().setWidth(10),
// 没选中时的大小
activeSize: ScreenUtil().setWidth(12),
// 选中时的大小
color: Colors.black54,
// 没选中时的颜色
activeColor: Colors.white)),
// 选中时的颜色
// control: new SwiperControl(color: Colors.pink), // 页面控制器 左右翻页按钮
viewportFraction: 0.85,
// 当前视窗展示比例 小于1可见上一个和下一个视窗
scale: 0.9, // 两张图片之间的间隔
),
);
}
首页数据是通过抓包获取的真实数据，存在本地的json，进行数据的处理
//1. 读取json文件
String jsonString = await rootBundle.loadString("assets/data/banner.json");
//2.转成List或Map类型
final jsonResult = json.decode(jsonString);
整理布局以Listview嵌套，新上手的小伙伴锻炼写布局可以
image.png
