请选择 进入手机版 | 继续访问电脑版

Flutter 轮播图(基础版)

[复制链接]
小甜心 发表于 2020-12-31 18:14:50 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
哈哈哈,女帝的身材绝了呀,做一个轮播图逐步看,身材比例也太好吧,你们也赶紧收藏学起来吧~
老例子,先看图
(一)效果图

(二)效果实现
首先,我们要引入依赖,在pubspec.yml这个文件写入一个指令,看图

版本号大概会差别,给个网址自己去下~
https://pub.dev/packages/flutter_swiper
然后就是准备你喜欢的图片,开始画ui啦
话不多说,上代码:复制即可运行,你看我多懂你们,嘿嘿
  1. import 'package:flutter/material.dart';import 'package:flutter_swiper/flutter_swiper.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      debugShowCheckedModeBanner: false,        home: SwiperPage ()//调用    );  }}class SwiperPage extends StatefulWidget {  @override  _SwiperPageState createState() => _SwiperPageState();}class _SwiperPageState extends State {  List imgList = [    {"url": "images/nvdi.jpg"},    {"url": "images/nvdi2.jpg"},    {"url": "images/nvdi3.PNG"}  ];  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text("轮播图"),      ),      body: new Swiper(        itemBuilder: (BuildContext context, int index) {          return new Image.asset(           imgList[index]["url"],            fit: BoxFit.fill,          );        },        autoplay: true,        itemCount:imgList.length,  //循环遍历次数         pagination: new SwiperPagination(),//设置分页器        control: new SwiperControl(),//左右箭头      ),    );  }}
复制代码
来源:https://blog.csdn.net/weixin_45425105/article/details/111995140
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )