Flutter Cloudimage 360 度视图
一个简单、交互式的资源，可用于提供产品的虚拟游览。
示例
要构建和运行示例应用程序
- 如果您还没有 Flutter，请在此处获取
- 克隆此存储库。
cd进入存储库文件夹。- 运行
flutter run-android或flutter run-ios来构建应用程序。
- 请注意，构建 iOS 应用需要一台装有 XCode 的 Mac 电脑
示例
安装
将 cloudimage_360_view: 1.0.3 添加到您的 pubspec.yaml 依赖项中。
导入包
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
类型：字符串 | 必需
您在云/CDN 上的图片文件夹。主图片的基础数据文件夹 URL。例如 https://domain.com/images/360-tesla/
imageName
类型：函数 | 必需
x|y 轴构建器中 360 度图片的文件名模式。String Function(int index) 必须返回一个有效的 String 路径，其中包含库将调用的索引，该索引将在 x|y 轴之间的一个数字 1 到 imageLength。
例如
Ci360Options.horizontal({
imageName: (index) => 'tesla-x-$index.jpg'
});
Ci360Options.vertical({
imageName: (index) => 'tesla-y-$index.jpg'
});
imagesLength
类型：整数 | 必需
在 360 度视图的 x | y 轴中加载的图片数量。必须是有效的长度才能获取图片的有效文件名
选项
类型：类 | 必需
Ci360Options({
this.autoRotate = false,
this.allowSwipeToRotate = true,
this.rotationCount = 1,
this.swipeSensitivity = 3,
this.frameChangeDuration = kShortDuration,
this.rotationDirection = CIRotationDirection.clockwise,
this.onImageChanged,
});
autoRotate
类型：布尔值 | 默认：false | 可选
如果设置为 true，图片将以递增的方式显示。
allowSwipeToRotate
类型：布尔值 | 默认：true | 可选
如果设置为 false，将禁用用于旋转图片的gestures。
rotationCount
类型：整数 | 默认：1 | 可选
整个图片旋转应发生的周期数。0 表示无限旋转。
swipeSensitivity
类型：整数 | 默认：3 | 可选
基于该值，滑动操作的灵敏度成比例地增加和减少。1 慢，速度增加 +1
frameChangeDuration
类型：Duration | 默认：Duration(milliseconds: 80) | 可选
从一帧图像切换到另一帧图像之间的时间间隔。
rotationDirection
类型：CIRotationDirection | 默认：CIRotationDirection.clockwise | 可选
根据该值设置旋转方向。
onImageChanged
类型：函数 | 默认：null | 可选
回调函数 Function(int index, CIImageChangedReason reason, Axis axis)，当图像帧与图像轴和原因更改时，为您提供当前图像的索引。
控制器
Ci360Controller
类型：类 | 默认：“Ci360ControllerImpl” | 可选
ci360 包的控制器。您可以实现自己的控制器
例如
class CustomCi360Controller implements Ci360Controller {
// Should Override this variables as below
@override
Completer readyCompleter = Completer();
Ci360State? _state;
@override
set state(Ci360State? state) {
_state = state;
if (!readyCompleter.isCompleted) {
readyCompleter.complete();
}
}
// Implement the required methods with your custom callbacks
// Then Pass Your Custom Controller To [Ci360View] widget.
}
方法
nextImage
类型：函数
手动旋转到下一张图片。
previousImage
类型：函数
手动旋转到上一张图片。
rotateToImage
类型：函数 | 参数：( int index, [Axis axis = Axis.horizontal] )
在指定的轴上手动旋转到指定的索引。
stopAutoPlay
类型：函数
手动停止图片的自动旋转。这是更按需的方式。使用 Ci360Options 中的 autoRotate 参数来指定 ImageView 的自动旋转行为。
startAutoPlay
类型：函数
手动启动图片的自动旋转。只有当 Ci360Options 中的 autoRotate 参数为 true 时，ImageView 才会自动播放。
最佳实践
为了使用 cloudimage 360 度视图，您的原始（主）图片应存储在可以通过 HTTP 或 HTTPS 访问的服务器或存储桶（S3、Google Cloud、Azure Blob 等）上。
贡献！
非常欢迎所有贡献！
许可
Flutter Cloudimage 360 View 在MIT 许可证下提供
