Flutter轮播图展示插件stacked_trio_carousel的使用

发布于 1周前 作者 bupafengyu 来自 Flutter

Flutter轮播图展示插件stacked_trio_carousel的使用

介绍

Stacked Trio Carousel 是一个Flutter插件,提供了一个视觉上吸引人的卡片轮播组件,具有三个卡片的堆叠布局。该组件在前景中显示一个突出的卡片,在背景中显示两个卡片,非常适合以分层和动态的方式展示内容。它内置了动画效果,并且可以通过自定义属性来调整样式,用户可以通过滑动浏览卡片或启用自动切换功能,获得流畅且交互性强的体验。

功能特性

  • 分层卡片布局:一个前景卡片和两个背景卡片。
  • 内置动画:支持平滑的卡片切换动画。
  • 自定义属性:可以调整卡片的尺寸、间距、缩放比例和透明度。
  • 手动滑动:支持用户手动滑动卡片。
  • 自动播放:可以设置自动播放间隔和动画持续时间。
  • 控制器:提供控制器用于控制轮播行为,如启动/停止自动播放。
  • 导航支持:通过 RouteObserver 确保在页面导航时轮播组件的行为正确。

使用方法

1. 添加依赖

pubspec.yaml 文件中添加 stacked_trio_carousel 作为依赖:

dependencies:
  stacked_trio_carousel: ^1.0.1
2. 基本用法

下面是一个完整的示例代码,展示了如何使用 StackedTrioCarousel 组件。该示例包括卡片的创建、控制器的使用以及导航支持。

import 'package:flutter/material.dart';
import 'package:stacked_trio_carousel/stacked_trio_carousel.dart';
import 'package:stacked_trio_carousel/stacked_trio_carousel_controller.dart';

// 定义 RouteObserver 用于导航支持
final RouteObserver routeObserver = RouteObserver();

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorObservers: [routeObserver], // 添加 RouteObserver
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Stacked Trio Carousel'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  // 定义颜色列表,用于生成不同颜色的卡片
  final List _color = [Colors.red, Colors.green, Colors.blue];

  // 创建 StackedTrioCarouselController 实例
  late StackedTrioCarouselController _carouselController;

  @override
  void initState() {
    // 初始化控制器,设置动画持续时间和自动播放间隔
    _carouselController = StackedTrioCarouselController(
      tickerProvider: this,
      animationDuration: const Duration(milliseconds: 200),
      autoPlayInterval: const Duration(seconds: 1),
      autoPlay: false, // 禁用自动播放
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 使用 StackedTrioCarousel 组件
            StackedTrioCarousel(
              background: Container(), // 背景容器
              params: StackedTrioCarouselParams(
                cardHeight: 200, // 卡片高度
                cardWidth: 200, // 卡片宽度
                padding: const EdgeInsets.symmetric(horizontal: 10), // 水平间距
              ),
              routeObserver: routeObserver, // 传递 RouteObserver
              controller: _carouselController, // 传递控制器
              children: _color
                  .map(
                    (color) => GestureDetector(
                      onTap: () {
                        // 点击卡片时跳转到第二个页面
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) => const SecondScreen(),
                          ),
                        );
                      },
                      child: Container(
                        decoration: BoxDecoration(
                          color: color, // 设置卡片颜色
                          borderRadius: BorderRadius.circular(25), // 圆角
                        ),
                      ),
                    ),
                  )
                  .toList(),
            ),
            const SizedBox(height: 200),
            // 控制自动播放的按钮
            ElevatedButton(
              onPressed: () {
                // 切换自动播放状态
                if (_carouselController.autoPlay) {
                  _carouselController.stopAutoPlay();
                } else {
                  _carouselController.startAutoPlay();
                }
                setState(() {});
              },
              child: Text(
                _carouselController.autoPlay ? "停止自动播放" : "开始自动播放",
                style: const TextStyle(color: Colors.black),
              ),
            )
          ],
        ),
      ),
    );
  }
}

// 第二个页面
class SecondScreen extends StatelessWidget {
  const SecondScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('第二个页面'),
      ),
      body: const Center(
        child: Text('这是第二个页面'),
      ),
    );
  }
}

自定义属性

1. 修改卡片尺寸

可以通过 cardHeightcardWidth 属性来调整卡片的尺寸:

StackedTrioCarouselParams(
  cardHeight: 150, // 修改卡片高度
  cardWidth: 150,  // 修改卡片宽度
)
2. 添加间距

可以使用 padding 属性为背景卡片添加水平间距:

StackedTrioCarouselParams(
  cardHeight: 150,
  cardWidth: 150,
  padding: const EdgeInsets.symmetric(horizontal: 10), // 添加水平间距
)
3. 修改缩放比例和最小透明度

scaleRatiominimumOpacity 属性仅影响背景卡片的缩放比例和透明度:

StackedTrioCarouselParams(
  cardHeight: 150,
  cardWidth: 150,
  padding: const EdgeInsets.symmetric(horizontal: 10),
  scaleRatio: 0.2,           // 背景卡片的缩放比例
  minimumOpacity: 0.1,       // 背景卡片的最小透明度
)
4. 修改动画持续时间和自动播放间隔

可以通过 animationDurationautoPlayInterval 属性来调整动画的持续时间和自动播放的间隔:

_stackedTrioCarouselController = StackedTrioCarouselController(
  tickerProvider: this,
  animationDuration: const Duration(milliseconds: 200), // 动画持续时间
  autoPlayInterval: const Duration(seconds: 1),        // 自动播放间隔
);
5. 手动滑动

默认情况下,用户可以通过手势手动滑动卡片。如果需要禁用自动播放并允许手动滑动,可以将 autoPlay 设置为 false

_stackedTrioCarouselController = StackedTrioCarouselController(
  tickerProvider: this,
  animationDuration: const Duration(milliseconds: 200),
  autoPlayInterval: const Duration(seconds: 1),
  autoPlay: false, // 禁用自动播放
);
6. 启动/停止自动播放

可以通过 startAutoPlaystopAutoPlay 方法来控制自动播放的启停:

ElevatedButton(
  onPressed: () {
    if (_carouselController.autoPlay) {
      _carouselController.stopAutoPlay(); // 停止自动播放
    } else {
      _carouselController.startAutoPlay(); // 开始自动播放
    }
    setState(() {});
  },
  child: Text(
    _carouselController.autoPlay ? "停止自动播放" : "开始自动播放",
    style: const TextStyle(color: Colors.black),
  ),
)

导航支持

如果应用中包含导航功能,建议使用 RouteObserver 来确保轮播组件在页面切换时的行为正确。具体步骤如下:

  1. 定义 RouteObserver 并将其添加到 MaterialApp 中:
final RouteObserver routeObserver = RouteObserver();

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorObservers: [routeObserver], // 添加 RouteObserver
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Stacked Trio Carousel'),
    );
  }
}
  1. RouteObserver 传递给 StackedTrioCarousel 组件:
StackedTrioCarousel(
  background: Container(),
  params: StackedTrioCarouselParams(
    cardHeight: 200,
    cardWidth: 200,
    padding: const EdgeInsets.symmetric(horizontal: 10),
  ),
  routeObserver: routeObserver, // 传递 RouteObserver
  controller: _carouselController,
  children: _color
      .map(
        (color) => GestureDetector(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => const SecondScreen(),
              ),
            );
          },
          child: Container(
            decoration: BoxDecoration(
              color: color,
              borderRadius: BorderRadius.circular(25),
            ),
          ),
        ),
      )
      .toList(),
)

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

1 回复

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


当然,以下是一个关于如何使用 stacked_trio_carousel 插件在 Flutter 中实现轮播图展示的示例代码。stacked_trio_carousel 是一个流行的 Flutter 插件,用于创建具有堆叠效果的轮播图。

首先,确保你的 pubspec.yaml 文件中已经添加了 stacked_trio_carousel 依赖:

dependencies:
  flutter:
    sdk: flutter
  stacked_trio_carousel: ^latest_version  # 请替换为最新版本号

然后运行 flutter pub get 来获取依赖。

接下来是具体的实现代码:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Stacked Trio Carousel Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CarouselScreen(),
    );
  }
}

class CarouselScreen extends StatefulWidget {
  @override
  _CarouselScreenState createState() => _CarouselScreenState();
}

class _CarouselScreenState extends State<CarouselScreen> {
  final List<String> images = [
    'https://via.placeholder.com/600x400?text=Image+1',
    'https://via.placeholder.com/600x400?text=Image+2',
    'https://via.placeholder.com/600x400?text=Image+3',
    'https://via.placeholder.com/600x400?text=Image+4',
    'https://via.placeholder.com/600x400?text=Image+5',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stacked Trio Carousel Demo'),
      ),
      body: Center(
        child: StackedTrioCarousel(
          images: images,
          aspectRatio: 16 / 9,
          size: Size(double.infinity, 300),
          dotSize: 6,
          dotSpacing: 12,
          indicatorBgColor: Colors.transparent,
          indicatorColor: Colors.white,
          borderRadius: 12,
          autoplay: true,
          autoplayDuration: 3000,
          autoplayCurve: Curves.easeInOutQuad,
          enableInfiniteScroll: true,
          pauseAutoPlayOnTouch: true,
          scrollPhysics: BouncingScrollPhysics(),
          onImageTap: (index) {
            print('Image tapped at index: $index');
          },
        ),
      ),
    );
  }
}

代码说明:

  1. 依赖导入

    • 导入 flutter/material.dartstacked_trio_carousel/stacked_trio_carousel.dart
  2. 主应用

    • MyApp 类定义了一个基本的 Flutter 应用,使用 MaterialApp 包装并设置了主题。
  3. 轮播图屏幕

    • CarouselScreen 是一个有状态的 widget,它包含了轮播图所需的状态和数据。
    • _CarouselScreenState 中,我们定义了一个包含图片 URL 的列表 images
  4. StackedTrioCarousel 配置

    • StackedTrioCarousel widget 使用了 images 列表中的图片。
    • aspectRatio 设置了图片的宽高比。
    • size 定义了轮播图的大小。
    • dotSizedotSpacing 设置了指示器圆点的大小和间距。
    • indicatorBgColorindicatorColor 分别设置了指示器背景色和指示器颜色。
    • borderRadius 设置了轮播图的圆角。
    • autoplayautoplayDurationautoplayCurve 控制了自动播放的行为。
    • enableInfiniteScroll 允许无限滚动。
    • pauseAutoPlayOnTouch 设置是否在触摸时暂停自动播放。
    • scrollPhysics 设置了滚动物理效果。
    • onImageTap 是一个回调函数,当用户点击图片时触发。

这个示例展示了如何使用 stacked_trio_carousel 插件创建一个基本的轮播图。你可以根据实际需求进一步自定义和扩展这个示例。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!