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

news2025/3/6 1:42:23

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 {
  @override
  Widget 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',
  ];

  @override
  Widget 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.0
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10.0), // 圆角半径为 10.0
                image: DecorationImage(
                  image: NetworkImage(url), // 使用 NetworkImage 加载网络图片
                  fit: BoxFit.cover, // 图片填充方式为覆盖整个容器
                ),
              ),
            );
          },
        );
      }).toList(), // 将 map 的结果转换为 List
    );
  }
}

代码说明：

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

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

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

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