Flutter图片轮播卡片插件photo_card_swiper的使用

Flutter 图片轮播卡片插件 photo_card_swiper 的使用

简介

photo_card_swiper 是一个简单的 Flutter 包,用于创建一系列照片的滑动卡片布局。photo_card_swiper 类似于一组可拖动的卡片堆叠,并且每张卡片都可以反映点赞、不喜欢和收藏等功能。卡片元素高度可定制。这种布局在像 Instagram、Tinder 等社交媒体应用中非常常见。

技术说明

页面布局使用 LayoutBuilder 构建,通过可拖动的小部件堆栈实现。该包还支持卡片点击事件。开发人员可以选择显示两个或三个按钮,并且可以更改这些按钮的颜色和图标名称及颜色。

如何使用

使用方法非常简单,只需使用以下代码即可默认渲染照片。默认的图标和颜色值已设置好,方便使用。

PhotoCardSwiper(
  photos: widget._photos,
  showLoading: false,
),

或者使用自定义参数:

PhotoCardSwiper(
  photos: widget._photos,
  showLoading: true,
  hideCenterButton: false,
  leftButtonIcon: Icons.close,
  rightButtonIcon: Icons.check,
  centerButtonIcon: Icons.favorite,
  leftButtonBackgroundColor: Colors.red[100],
  rightButtonBackgroundColor: Colors.lightGreen[100],
  centerButtonBackgroundColor: Colors.lightBlue[50],
  leftButtonIconColor: Colors.red[600],
  rightButtonIconColor: Colors.lightGreen[700],
  centerButtonIconColor: Colors.lightBlue[600],
  leftButtonAction: _leftButtonClicked,
  rightButtonAction: _rightButtonClicked,
  centerButtonAction: _centerButtonClicked,
  onCardTap: _onCardTap,
  cardSwiped: _cardSwiped,
)

参数

以下是 photo_card_swiper 中可用的参数及其描述:

参数 描述 值类型
photos 要渲染为卡片的照片数组,使用 PhotoCard 对象来分组卡片详细信息。 [PhotoCard]
showLoading 切换显示/隐藏加载卡片的值。 可选参数,true/false
hideCenterButton 如果只想有 2 个动作按钮,请使用此参数。 可选参数,true/false
leftButtonIcon 左侧按钮图标 可选参数,IconData
rightButtonIcon 右侧按钮图标 可选参数,IconData
centerButtonIcon 中心按钮图标 可选参数,IconData
leftButtonBackgroundColor 左侧按钮背景色 可选参数,Color
rightButtonBackgroundColor 右侧按钮背景色 可选参数,Color
centerButtonBackgroundColor 中心按钮背景色 可选参数,Color
leftButtonIconColor 左侧按钮图标颜色 可选参数,Color
rightButtonIconColor 右侧按钮图标颜色 可选参数,Color
centerButtonIconColor 中心按钮图标颜色 可选参数,Color
leftButtonAction 左侧按钮点击处理器 可选参数,点击时调用的方法
rightButtonAction 右侧按钮点击处理器 可选参数,点击时调用的方法
centerButtonAction 中心按钮点击处理器 可选参数,点击时调用的方法
onCardTap 卡片点击处理器 可选参数,点击时调用的方法
cardSwiped 卡片滑动处理器 可选参数,滑动时调用的方法

PhotoCard 属性

以下是 PhotoCard 中可用的属性及其描述:

参数 描述 默认值
title 在标题文本小部件中显示的字符串 空字符串
description 在描述文本小部件中显示的字符串 空字符串
imagePath 图片路径,可以是本地资源文件夹中的图像或 HTTP 图像路径 空字符串
isLocalImage 如果 imagePath 是本地资源文件夹中的图像,则为 true;如果 imagePath 是 HTTP 图像路径,则为 false true

请注意,一次最多加载 10 张照片以保持堆栈整洁。要显示更多照片,可以使用分页加载的方式,通过 cardSwiped 方法实现。

示例代码

示例代码位于 这里

import 'package:example/example_page_widget.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: ExamplePageWidget(),
    debugShowCheckedModeBanner: false,
  ));
}

更多关于Flutter图片轮播卡片插件photo_card_swiper的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter图片轮播卡片插件photo_card_swiper的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用photo_card_swiper插件来实现图片轮播卡片的一个简单示例。首先,确保你已经在pubspec.yaml文件中添加了photo_card_swiper依赖:

dependencies:
  flutter:
    sdk: flutter
  photo_card_swiper: ^最新版本号 # 请替换为实际最新版本号

然后,运行flutter pub get来安装依赖。

接下来,在你的Flutter项目中,你可以按照以下方式使用photo_card_swiper插件:

import 'package:flutter/material.dart';
import 'package:photo_card_swiper/photo_card_swiper.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Photo Card Swiper Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PhotoCardSwiperDemo(),
    );
  }
}

class PhotoCardSwiperDemo extends StatelessWidget {
  final List<String> imageUrls = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg',
    // 添加更多图片URL
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Photo Card Swiper Demo'),
      ),
      body: Center(
        child: PhotoCardSwiper(
          imageUrls: imageUrls,
          placeholder: 'https://example.com/placeholder.jpg', // 可选,占位符图片URL
          onImageClick: (index) {
            // 图片点击事件回调
            print('Image clicked at index: $index');
          },
          onPageChanged: (index) {
            // 页面更改回调
            print('Page changed to index: $index');
          },
          autoplay: true, // 自动播放
          autoplayDuration: 3000, // 自动播放间隔时间(毫秒)
          height: 300, // 卡片高度
          aspectRatio: 16 / 9, // 宽高比
          enableInfiniteScroll: true, // 无限滚动
        ),
      ),
    );
  }
}

在这个示例中:

  1. 我们首先导入了必要的包。
  2. 创建了一个MyApp类,它是应用的根widget。
  3. MyApp类中,我们定义了PhotoCardSwiperDemo作为主页。
  4. PhotoCardSwiperDemo类中,我们定义了一个包含图片URL的列表imageUrls
  5. 使用PhotoCardSwiper widget来显示图片轮播卡片,并配置了相关属性,如占位符图片URL、点击事件回调、页面更改回调、自动播放设置、卡片高度、宽高比以及是否启用无限滚动。

确保将imageUrls列表中的URL替换为你自己的图片URL。这个示例展示了如何使用photo_card_swiper插件来创建一个具有基本功能的图片轮播卡片视图。根据具体需求,你可以进一步自定义和扩展这个示例。

回到顶部