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@微胖子9 小时前
Flutter项目之登录注册功能实现
开发语言·javascript·flutter
小墙程序员10 小时前
Flutter 教程(十一)多语言支持
flutter
无知的前端12 小时前
Flutter 一文精通Isolate,使用场景以及示例
android·flutter·性能优化
yidahis13 小时前
Flutter 运行新建项目也报错?
flutter·trae
木马不在转13 小时前
Flutter-权限permission_handler插件配置
flutter
江上清风山间明月16 小时前
一周掌握Flutter开发--9. 与原生交互(下)
flutter·交互·原生·methodchannel
GeniuswongAir16 小时前
Flutter极速接入IM聊天功能并支持鸿蒙
flutter·华为·harmonyos
sayen17 小时前
记录 flutter 文本内容展示过长优化
前端·flutter
勤劳打代码17 小时前
剑拔弩张——焦点竞争引的发输入失效
flutter·客户端·设计
张风捷特烈20 小时前
Flutter 伪 3D 绘制#02 | 地平面与透视
android·flutter