四、Flutter轮播图

最新推荐文章于 2025-03-01 14:48:31 发布

原创

最新推荐文章于 2025-03-01 14:48:31 发布 · 285 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter #iOS #Android #前端 #跨平台

本文介绍了如何在Flutter应用中集成flutter_swiper库和cached_network_image库，实现轮播图功能。通过添加依赖，导入相关包，配置滚动方向，设置图片缓存，实现了在iOS和Android双平台上兼容的轮播图效果。

目录
一、集成flutter_swiper和cached_network_image
二、flutter_swiper
三、图片缓存
四、整体代码
五、flutter run

一、集成flutter_swiper和cached_network_image
pubspec.yaml 中添加flutter_swiper : ^1.1.6和 cached_network_image: ^1.0.0，并同步 flutter packages get 。
在相应的 .dart 文件中添加引用import 'package:flutter_swiper/flutter_swiper.dart’和import ‘package:cached_network_image/cached_network_image.dart’。

 dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  dio: ^2.1.10
  fluttertoast: ^3.1.0
  flutter_swiper: ^1.1.6
  cached_network_image: ^1.0.0

二、flutter_swiper
可以设置滚动方向，设置为Axis.vertical如果需要垂直滚动。多种布局方式，无限轮播，Android和IOS双端适配。

 ConstrainedBox(
              child: Swiper(
                outer: false,
                itemBuilder: (c, i) {
                  if(swiperDat

最低0.47元/天解锁文章