Flutter 3D轮播图插件carousel_widget_3d的使用

3D轮播图

该插件提供了一个可以将用户数据以3D轮播形式展示的小部件。

开始使用

1. 在pubspec.yaml中添加依赖包

dependencies:
  carousel_3d: 1.0.0

2. 导入插件到文件中

在需要使用的文件中导入插件：

import 'package:carousel_3d/carousel_3d.dart';

3. 创建并配置Carousel3d

通过以下代码创建一个简单的3D轮播图：

Carousel3d(
  center: _center, // 当前中心元素的索引
  items: [
    // 要展示的子项
    Card(
      child: Image.asset('assets/img_1.png'),
    ),
    Card(
      child: Image.asset('assets/img_2.png'),
    ),
    Card(
      child: Image.asset('assets/img_3.png'),
    ),
    Card(
      child: Image.asset('assets/img_4.png'),
    ),
    Card(
      child: Image.asset('assets/img_5.png'),
    ),
  ],
)

使用示例

显示5张不同的图片

以下是完整的示例代码，展示如何在Flutter中使用carousel_3d插件来创建一个3D轮播图：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('3D Carousel Example')),
        body: Center(
          child: Carousel3dExample(),
        ),
      ),
    );
  }
}

class Carousel3dExample extends StatefulWidget {
  [@override](/user/override)
  _Carousel3dExampleState createState() => _Carousel3dExampleState();
}

class _Carousel3dExampleState extends State<Carousel3dExample> {
  int _center = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Carousel3d(
          center: _center, // 当前中心元素的索引
          totalItems: 5,   // 总共展示的卡片数量
          radius: 200,     // 卡片之间的距离
          perspective: 120,// 视角深度
          autoplay: true,  // 是否自动播放
          onIndexChanged: (index) {
            setState(() {
              _center = index; // 更新中心索引
            });
          },
          items: List.generate(5, (index) {
            return Card(
              elevation: 10, // 卡片阴影
              child: Image.asset(
                'assets/img_$index.png', // 动态加载图片
                fit: BoxFit.cover,
              ),
            );
          }),
        ),
        SizedBox(height: 20),
        Text("当前中心卡片索引: $_center"), // 显示当前中心卡片索引
      ],
    );
  }
}