Flutter 360度全景图展示插件cloudimage_360_view的使用

目录

• 示例
• 安装
• 如何使用
• 图像模型
• 选项
• 控制器
• 最佳实践
• 贡献
• 许可证

示例

要构建和运行示例应用程序，请按照以下步骤操作：

1. 如果您还没有Flutter，请从这里获取。
2. 克隆此仓库。
3. 进入仓库文件夹。
4. 运行flutter run-android或flutter run-ios以构建应用程序。

请注意，构建iOS应用程序需要配备XCode的Mac电脑。

示例代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Cloud Image 360 View',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const ExamplePage(),
    );
  }
}

class ExamplePage extends StatefulWidget {
  const ExamplePage({Key? key}) : super(key: key);

  @override
  State<ExamplePage> createState() => _ExamplePageState();
}

class _ExamplePageState extends State<ExamplePage> {
  bool autoRotate = true;
  bool allowSwipe = true;
  int swipeSensitivity = 1;
  int rotationCount = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          padding: const EdgeInsets.all(8),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // UI组件（如图片、文本等）...
              
              _TileBuilder(
                headerTitle: 'Horizontal & Vertical (x&y) Axis Eaxmple',
                child: Ci360View(
                  xImageModel: Ci360ImageModel.horizontal(
                    imageFolder: 'https://scaleflex.cloudimg.io/v7/demo/360-nike/',
                    imageName: (index) => 'nike-$index.jpg',
                    imagesLength: 35,
                  ),
                  yImageModel: Ci360ImageModel.vertical(
                    imageFolder: 'https://scaleflex.cloudimg.io/v7/demo/360-nike/',
                    imageName: (index) => 'nike-y-$index.jpg',
                    imagesLength: 36,
                  ),
                  options: Ci360Options(
                    swipeSensitivity: swipeSensitivity,
                    autoRotate: autoRotate,
                    rotationCount: rotationCount,
                    allowSwipeToRotate: allowSwipe,
                    onImageChanged: (index, reason, axis) {},
                  ),
                ),
              ),
              
              _TileBuilder(
                headerTitle: 'Horizontal(x) Axis Only Eaxmple',
                child: Ci360View(
                  xImageModel: Ci360ImageModel.horizontal(
                    imageFolder: 'https://scaleflex.cloudimg.io/v7/demo/earbuds/',
                    imageName: (index) => '$index.jpg',
                    imagesLength: 233,
                  ),
                  options: Ci360Options(
                    swipeSensitivity: swipeSensitivity,
                    autoRotate: autoRotate,
                    rotationCount: rotationCount,
                    allowSwipeToRotate: allowSwipe,
                    onImageChanged: (index, reason, axis) {},
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class _TileBuilder extends StatelessWidget {
  const _TileBuilder({
    required this.headerTitle,
    required this.child,
    Key? key,
  }) : super(key: key);

  final String headerTitle;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8),
      child: Column(
        children: [
          Text(
            headerTitle,
            style: Theme.of(context).textTheme.bodyLarge,
          ),
          SizedBox(height: 8), // smallVerticalSpacer
          child,
        ],
      ),
    );
  }
}

安装

在您的pubspec.yaml中添加依赖项：

dependencies:
  cloudimage_360_view: 1.0.3

然后导入包：

import 'package:cloudimage_360_view/cloudimage_360_view.dart';

如何使用

创建一个Ci360View小部件，并传递必要的参数：

Ci360View(
    xImageModel: Ci360ImageModel.horizontal(
        imageFolder: 'your image x folder - check Ci360ImageModel',
        imageName: (index) => '$index.jpg',
        imagesLength: 233,
    ),
    yImageModel: Ci360ImageModel.vertical(
        imageFolder: 'your image y folder - check Ci360ImageModel',
        imageName: (index) => 'imagename-y-$index.jpg',
        imagesLength: 36,
    ),
    options: Ci360Options(
        swipeSensitivity: 2,
        autoRotate: true,
        rotationCount: 5,
        allowSwipeToRotate: true,
        onImageChanged: (index, reason, axis) {},
    ),
)

图像模型

水平（X轴）

Ci360ImageModel.horizontal({
    required this.imageFolder,
    required this.imageName,
    required this.imagesLength,
});

垂直（Y轴）

Ci360ImageModel.vertical({
    required this.imageFolder,
    required this.imageName,
    required this.imagesLength,
});

参数说明

• imageFolder: 必填，String类型。你的图片存储路径。
• imageName: 必填，Function类型。返回图片名称的函数。
• imagesLength: 必填，int类型。指定轴上的图片数量。

选项

Ci360Options({
    this.autoRotate = false,
    this.allowSwipeToRotate = true,
    this.rotationCount = 1,
    this.swipeSensitivity = 3,
    this.frameChangeDuration = kShortDuration,
    this.rotationDirection = CIRotationDirection.clockwise,
    this.onImageChanged,
});

控制器

可以自定义控制器类来实现特定功能。例如：

class CustomCi360Controller implements Ci360Controller {
  @override
  Completer readyCompleter = Completer();

  Ci360State? _state;

  @override
  set state(Ci360State? state) {
    _state = state;
    if (!readyCompleter.isCompleted) {
      readyCompleter.complete();
    }
  }

  // 实现所需的方法与自定义回调
}

最佳实践

为了使用cloudimage 360 view，您的原始（主）图片应该存储在可以通过HTTP或HTTPS访问的服务器或存储桶（如S3、Google Cloud、Azure Blob等）上。

贡献

所有贡献都非常欢迎！

许可证

Flutter Cloudimage 360 View是根据MIT许可证提供的。