Flutter 学习之旅 之 flutter 使用 carousel_slider 简单实现轮播图效果

Flutter 学习之旅 之 flutter 使用 carousel_slider  简单实现轮播图效果

目录

Flutter 学习之旅 之 flutter 使用 carousel_slider  简单实现轮播图效果

一、简单介绍

二、简单介绍 carousel_slider

三、安装 carousel_slider

四、简单案例实现

五、关键代码

---

一、简单介绍

Flutter 是一款开源的 UI 软件开发工具包，由 Google 开发和维护。它允许开发者使用一套代码同时构建跨平台的应用程序，包括移动设备（iOS 和 Android）、Web 和桌面平台（Windows、macOS 和 Linux）。

Flutter 使用 Dart 编程语言，它可以将代码编译为 ARM 或 Intel 机器代码以及 JavaScript，从而实现快速的性能。Flutter 提供了一个丰富的预置小部件库，开发者可以根据自己的需求灵活地控制每个像素，从而创建自定义的、适应性强的设计，这些设计在任何屏幕上都能呈现出色的外观和感觉。

二、简单介绍 carousel_slider

网址：carousel_slider | Flutter package

carousel_slider 是一个非常流行的 Flutter 插件，用于实现轮播图（Carousel）效果。它提供了简单易用的 API，能够快速实现自动播放、分页指示器、页面缩放等常见功能，非常适合用于展示图片、广告、产品推荐等内容。

三、安装 carousel_slider

1、直接运行命令

使用 Flutter：flutter pub add carousel_slider

2、或者在 pubspec.yaml 添加

dependencies:carousel_slider: ^5.0.0

四、简单案例实现

1、这里使用 Android Studio 进行创建 Flutter 项目

2、创建一个 application 的 Flutter 项目

3、工程创建后如下

4、编写代码实现添加图片，进行轮播的功能

5、连接设备，运行项目，简单效果如下

五、关键代码

import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';void main() {runApp(MyApp());
}// 主应用程序类，继承自 StatelessWidget
class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {// 返回一个 MaterialApp，这是 Flutter 应用的根组件return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('Flutter 轮播图示例'), // 应用栏标题),body: CarouselExample(), // 轮播图组件),);}
}// 轮播图组件，继承自 StatelessWidget
class CarouselExample extends StatelessWidget {// 定义一个包含图片 URL 的列表final List<String> imageUrls = ['https://imgcps.jd.com/ling-cubic/turing/deliverysoa/6e9cb00a483644faa026d4c9056b276e/cr/s/q70.jpg','https://imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2020218/10024267605897/FocusFullshop/CkJqZnMvdDEvNzUxNjEvMzcvMjcwNTYvMTU1NjgvNjZjNjU3OTJGNjUzMGYxYTMvMjA5MzIyMGM3ZjQwNjBiNC5wbmcSBTcwNC10MAI4-qZ7QhAKDOa1t-WwlOWGsOeusRABQhMKD-S8mOaDoOS6q-S4jeWBnBACQhAKDOeri-WNs-aKoui0rRAGQgoKBueyvumAiRAHWInPo6ffowI/cr/s/q.jpg','https://imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2020219/34756555753/FocusFullshop/CkNqZnMvdDEvNTU1OTYvMTYvMjY1MjQvNjI3MzQwLzY2YzZkNzliRjA2ZTBmYjkyLzc0ZTA3MjQzYzg3NDlkMjAucG5nEgU3MDMtdDACOPume0ITCg_liZHljZfmmKXnmb3phZIQAUIQCgznm5vmg6Dni6zkuqsQAkIQCgznq4vljbPmiqLotK0QBkIHCgPmiqIQB1jp55u9gQE/cr/s/q.jpg','https://imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2020220/10021192827208/FocusFullshop/CkJqZnMvdDEvMTE1MDMvMzMvMjI4NTIvODI3MDIvNjZjODE4NmJGN2VlYmE5YjkvZjgzMzI4ZDhlY2FkNTg2Zi5wbmcSBTUxNS13MAE4_KZ7QhYKEumVv-iZueW5s-adv-eUteinhhABQhAKDOWlvei0p-axh-iBmhACQhAKDOeri-WNs-aKoui0rRAGQgoKBueyvumAiRAHWMiCju3TowI/cr/s/q.jpg',];@overrideWidget build(BuildContext context) {// 使用 CarouselSlider 组件实现轮播图return CarouselSlider(options: CarouselOptions(height: 200.0, // 轮播图的高度autoPlay: true, // 是否自动播放enlargeCenterPage: true, // 是否放大中心页面aspectRatio: 16 / 9, // 宽高比autoPlayInterval: Duration(seconds: 3), // 自动播放间隔时间autoPlayAnimationDuration: Duration(milliseconds: 800), // 自动播放动画时长autoPlayCurve: Curves.fastOutSlowIn, // 自动播放动画曲线pauseAutoPlayOnTouch: true, // 触摸时暂停自动播放viewportFraction: 0.8, // 每个页面的显示比例),items: imageUrls.map((url) {// 使用 map 方法将图片 URL 转换为轮播图的页面return Builder(builder: (BuildContext context) {// 返回一个 Container，用于显示图片return Container(width: MediaQuery.of(context).size.width, // 容器宽度为屏幕宽度margin: EdgeInsets.symmetric(horizontal: 5.0), // 左右外边距为 5.0decoration: BoxDecoration(borderRadius: BorderRadius.circular(10.0), // 圆角半径为 10.0image: DecorationImage(image: NetworkImage(url), // 使用 NetworkImage 加载网络图片fit: BoxFit.cover, // 图片填充方式为覆盖整个容器),),);},);}).toList(), // 将 map 的结果转换为 List);}
}

代码说明：

1. MyApp 类：这是主应用程序类，负责创建一个 MaterialApp，并设置其 home 属性为 Scaffold，包含一个 AppBar 和一个 CarouselExample 轮播图组件。

2. CarouselExample 类：这是轮播图组件类，包含一个图片 URL 列表 imageUrls，并使用 CarouselSlider 实现轮播图效果。

3. CarouselOptions：用于配置轮播图的各种行为，例如自动播放、页面放大、动画效果等。

4. Builder 和 Container：用于构建每个轮播图页面，设置图片的样式和布局。