6 本地数据和轮播图组件绑定

不知到大家在软件开发过程中,一般首页布局顶部都会有1个轮播图滚动来宣传自己的产品,一般轮播图点击跳转H5的详情页。

当然一个页面的开发要有客户端开发和服务端开发,往往开发的时候2端都是并行开发的,有的时候客户端开发UI完成后,服务端的数据接口还没有开发完成,所以需要自己在本地创建一些数据来提前看一下UI展示的效果!

那么话不多说,我们开始来详细描述 本地数据和轮播图组件绑定实现过程:

1 引入flutter_swiper_null_safety轮播图插件

在pubspec.yaml文件引入flutter_swiper_null_safety轮播图插件

flutter_swiper_null_safety

2 在Home.dart文件封装1个组件函数_swiperWidget

声明imgList制造轮播图数据imgList

imgList

外层套入1个container和AspectRatio设置轮播图的宽高比例

Container+AspectRatio


_swiperWidget整体

3 在build函数调用

4 终端adb链接Mumu模拟器

adb

5  执行flutter run命令运行模拟器看轮播图效果展示

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容