Flutter 轮播图（基础版）

最新推荐文章于 2024-08-09 08:28:38 发布

清风99w

最新推荐文章于 2024-08-09 08:28:38 发布

阅读量515

点赞数 3

分类专栏： Flutter

本文链接：https://blog.csdn.net/weixin_45425105/article/details/111995140

版权

Flutter 专栏收录该内容

53 篇文章 3 订阅

订阅专栏

哈哈哈，女帝的身材绝了呀，做一个轮播图慢慢看，身材比例也太好吧，你们也赶紧收藏学起来吧~

老规矩，先看图
（一）效果图
在这里插入图片描述
（二）效果实现
首先，我们要引入依赖，在pubspec.yml这个文件写入一个指令，看图

版本号可能会不同，给个网址自己去下~
https://pub.dev/packages/flutter_swiper

然后就是准备你喜欢的图片，开始画ui啦

话不多说，上代码：复制即可运行，你看我多懂你们，嘿嘿

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<SwiperPage> {
  List<Map> 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(),//左右箭头
      ),
    );
  }
}