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 {
@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：用于构建每个轮播图页面，设置图片的样式和布局。