Flutter简单轮播图组件～～

最新推荐文章于 2024-08-08 07:09:05 发布

姐姐由我保护

最新推荐文章于 2024-08-08 07:09:05 发布

阅读量185

点赞数

分类专栏： FLUTTER 文章标签： flutter dart

本文链接：https://blog.csdn.net/qq_42612091/article/details/115067649

版权

FLUTTER 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

第一步：

首先找到项目目录下的pubspec.yaml文件，然后把做这个代码flutter_swiper: ^1.0.6 写入文件，然后在终端运行flutter pub get。这个插件就安装完成。

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_swiper: ^1.0.6

在这里插入图片描述

flutter pub get

在这里插入图片描述

第二步

引用轮播图插件包，进行实例开发

import 'package:flutter_swiper/flutter_swiper.dart';

在这里插入图片描述

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class SwiperPage extends StatefulWidget {
  SwiperPage({Key key}) : super(key: key);

  @override
  _SwiperPageState createState() => _SwiperPageState();
}

class _SwiperPageState extends State<SwiperPage> {
  @override
  Widget build(BuildContext context) {
    // ScreenUtil.instance = ScreenUtil(width: 1920, height: 1080)..init(context);
    return Scaffold(
        body: ConstrainedBox(
      constraints: BoxConstraints.tightFor(),
      child: Stack(
        alignment: Alignment.center,
        children: [
          Container(
            color: Colors.grey,
          ),
          Container(
            alignment: Alignment.center,
            width: ScreenUtil().setWidth(626),//这个是屏幕是适配的代码，也是需要安装插件，可以直接输入例子 width:100.0
            height: ScreenUtil().setHeight(552),
            color: Colors.white,
            child: Swiper(
              itemBuilder: _swiperBuilder,
              itemCount: 3,
              pagination: new SwiperPagination(
                  builder: DotSwiperPaginationBuilder(
                color: Colors.black54,
                activeColor: Colors.white,
              )),
              scrollDirection: Axis.horizontal,
              autoplay: true,//是否自动轮播
              onTap: (index) => print('点击了第$index个'),
            ),
          )
        ],
      ),
    ));
  }
  //图片组
  Widget _swiperBuilder(BuildContext context, int index) {
    var image_url = [
      "https://i.henghajiang.com/login_bg.png",
      "https://i.henghajiang.com/lucky_logo.png",
      "https://i.henghajiang.com/login_img.png",
    ];

    List imgList = [];//定一个空列表
    //迭代形成组件
    for (var img in image_url) {
      Widget item = Image.network(
        '$img',
        fit: BoxFit.fill,
        width: ScreenUtil().setWidth(626),
        height: ScreenUtil().setHeight(522),
      );
      imgList.add(item);
    }
    return imgList[index];
  }
}