Flutter未知功能插件cubixd的潜在用途探索

CubixD, a 3d cube

CubixD 是一个用于在 Flutter 应用中创建 3D 立方体的插件。它提供了两个主要的小部件：AnimatedCubixD 和 CubixD。

安装

首先，在 pubspec.yaml 文件中添加 cubixd 依赖：

dependencies:
  cubixd: ^0.1.1

然后导入插件：

import 'package:cubixd/cubixd.dart';

功能

• AnimatedCubixD：带有动画效果的 3D 立方体。
• CubixD：静态的 3D 立方体。

使用方法

AnimatedCubixD

AnimatedCubixD 是一个带有动画效果的 3D 立方体小部件。它使用了三个 AnimationController 来控制三种不同的动画效果。包括阴影、彩色星星、所有动画以及选择面的功能。

参数

示例代码

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:cubixd/cubixd.dart';

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

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> with TickerProviderStateMixin {
  late final AnimationController _ctrl;

  @override
  void initState() {
    _ctrl = AnimationController(vsync: this, duration: const Duration(seconds: 10));
    _ctrl.forward();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("CubixD test")),
      body: Center(
        child: AnimatedCubixD(
          size: 300,
          advancedXYposAnim: AnimRequirements(
            controller: _ctrl,
            xAnimation: Tween<double>(begin: -pi / 4, end: pi * 2 - pi / 4).animate(_ctrl),
            yAnimation: Tween<double>(begin: pi / 4, end: pi / 4).animate(_ctrl),
          ),
          stars: true,
          shadow: true,
          onSelected: (SelectedSide opt) {
            switch (opt) {
              case SelectedSide.back:
                return true;
              case SelectedSide.top:
                return true;
              case SelectedSide.front:
                return true;
              case SelectedSide.bottom:
                return false; // out of service
              case SelectedSide.right:
                return true;
              case SelectedSide.left:
                return true;
              case SelectedSide.none:
                return false;
              default:
                throw Exception("Unimplemented option");
            }
          },
          top: Container(color: Colors.red),
          bottom: Container(color: Colors.pink),
          left: Container(color: Colors.blue),
          right: Container(color: Colors.yellow),
          front: Container(color: Colors.amber),
          back: Container(color: Colors.greenAccent),
        ),
      ),
    );
  }
}

CubixD

CubixD 是一个静态的 3D 立方体小部件。它不包含阴影和旋转动画，但包含了选择面的功能（几乎）。

参数

示例代码

import 'package:cubixd/cubixd.dart';
import 'package:flutter/material.dart';
import 'package:vector_math/vector_math_64.dart' show Vector2;

class StaticCubeExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("CubixD Static Example")),
      body: Center(
        child: CubixD(
          size: 200.0,
          delta: Vector2(pi / 4, pi / 4),
          onSelected: (SelectedSide opt, Vector2 delta) {
            print('On selected callback:\n\topt = ${opt}\n\tdelta = ${delta}');
          },
          front: Container(color: Colors.amber),
          back: Container(color: Colors.greenAccent),
          right: Container(color: Colors.yellow),
          left: Container(color: Colors.blue),
          top: Container(color: Colors.red),
          bottom: Container(color: Colors.pink),
        ),
      ),
    );
  }
}

额外信息

SelectedSide

SelectedSide 是一个枚举，用于表示选择的面：

enum SelectedSide { front, back, right, left, top, bottom, none }

计算不精确

请注意，当你想要获取特定角度时，水平角度的方向会根据垂直角度的变化而变化。例如：

• 如果垂直角度在 -90° 到 90° 之间，水平角度大于 0（正数）的方向是从右到左。
• 如果垂直角度大于 90°，水平角度大于 0（正数）的方向是从左到右。

TODO

1. 可能将前面、后面、右面、左面、顶面和底面的 widget 用 List<Widget> 来管理会更好。
2. 提供控制上下动画的可能性。

通过以上内容，你可以更好地理解和使用 cubixd 插件来创建和管理 3D 立方体。希望这些信息对你有所帮助！