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

目录

[Flutter 学习之旅 之 flutter 使用 carousel_slider 简单实现轮播图效果](#Flutter 学习之旅 之 flutter 使用 carousel_slider 简单实现轮播图效果)

一、简单介绍

[二、简单介绍 carousel_slider](#二、简单介绍 carousel_slider)

[三、安装 carousel_slider](#三、安装 carousel_slider)

四、简单案例实现

五、关键代码


一、简单介绍

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

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

网址:carousel_slider | Flutter package

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

1、直接运行命令

使用 Flutter:flutter pub add carousel_slider

2、或者在 pubspec.yaml 添加

Dart 复制代码
dependencies:
  carousel_slider: ^5.0.0

四、简单案例实现

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

2、创建一个 application 的 Flutter 项目

3、工程创建后如下

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

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

五、关键代码

Dart 复制代码
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
    );
  }
}

代码说明:

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

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

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

  4. BuilderContainer:用于构建每个轮播图页面,设置图片的样式和布局。

相关推荐
bst@微胖子13 小时前
Flutter之路由和导航
flutter
亚洲小炫风14 小时前
flutter 中各种日志
前端·flutter·日志·log
louisgeek17 小时前
Flutter 动画之 Implicit 隐式动画
flutter
勤劳打代码17 小时前
游刃有余 —— Isolate 轻量化实战
flutter·github·dart
RichardLai881 天前
[Flutter 基础] - Flutter基础组件 - Text
android·flutter
Ya-Jun1 天前
常用第三方库精讲:cached_network_image图片加载优化
android·flutter
WDeLiang1 天前
Flutter 环境搭建
flutter·ios·visual studio code
程一个大前端2 天前
【Flutter高效开发】GetX指南:一文学会状态管理、路由与依赖注入
flutter
DEVIL2 天前
Flutter中各类Controller的本质
android·flutter
ak啊2 天前
Flutter UI 组件应用一:布局、交互、动画与弹窗
flutter