Flutter方向旋转控制插件directional_rotation的使用

Flutter方向旋转控制插件directional_rotation的使用

directional_rotation 是一个隐式旋转其子组件到所提供的角度的部件。该角度在约束允许的方向内进行旋转：最近、最远、顺时针或逆时针。

使用

首先，我们需要导入 directional_rotation 包：

import 'package:directional_rotation/directional_rotation.dart';

DirectionalRotation 接受一个 angle 参数（默认以度为单位），并在每次更新 angle 时将其子组件旋转到新的 angle。

/// 每次修改 [angle] 时，[DirectionalRotation] 将旋转其子组件到新的 [angle]。
double angle = 180.0;

DirectionalRotation(
  angle: angle,
  child: MyWidget(),
);

缩放

angle 可以归一化到任何 scale。默认情况下，angle 等于度数（scale 为 360）。

/// 这个 [DirectionalRotation] 归一化到 0 到 1 的范围，并且当前旋转到 0.5，这相当于默认范围内的 180 度。
DirectionalRotation(
  angle: 0.5,
  scale: 1.0,
  child: MyWidget(),
);

动画持续时间

默认情况下，每次动画的持续时间将根据旧 angle 和新 angle 之间的差异来确定。在这种情况下，duration 将等于一次完整的旋转。

factorDuration 可以设置为 false，以使每次动画持续整个 duration。

duration 默认为 1 秒。

/// 如果 [angle] 从 0 更改为 180，则动画的持续时间为 0.5 并持续 500 毫秒。
DirectionalRotation(
  angle: 180,
  duration: Duration(seconds: 1),
  child: MyWidget(),
);

/// 在这种情况下，由于 [factorDuration] 设置为 false，动画将持续整个 1 秒。
DirectionalRotation(
  angle: 180,
  duration: Duration(seconds: 1),
  factorDuration: false,
  child: MyWidget(),
);

方向性

默认情况下，子组件将在当前 angle 到新 angle 的最短跨度方向上旋转。

direction 可以设置为改变旋转方向的确定方式。

/// 这个 [DirectionalRotation] 只会按顺时针方向旋转其子组件。
DirectionalRotation(
  angle: 0,
  direction: RotationDirection.clockwise,
  child: MyWidget(),
);

/// 这个 [DirectionalRotation] 只会按逆时针方向旋转其子组件。
DirectionalRotation(
  angle: 0,
  direction: RotationDirection.counterClockwise,
  child: MyWidget(),
);

/// 这个 [DirectionalRotation] 会在当前角度到新角度的最短跨度方向上旋转其子组件。
DirectionalRotation(
  angle: 0,
  direction: RotationDirection.closest,
  child: MyWidget(),
);

/// 这个 [DirectionalRotation] 会在当前角度到新角度的最长跨度方向上旋转其子组件。
DirectionalRotation(
  angle: 0,
  direction: RotationDirection.furthest,
  child: MyWidget(),
);

完整示例 Demo

以下是一个完整的示例代码，演示了如何使用 directional_rotation 插件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'DirectionalRotation 示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'DirectionalRotation'),
    );
  }
}

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

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  /// 应用到子组件的角度。
  int angle = 0;

  /// 将 [angle] 随机设置在 0.0 到 360.0 之间。
  void randomizeAngle() {
    angle = Random().nextInt(360);
    if (mounted) setState(() {});
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Padding(
              padding: EdgeInsets.all(20.0),
              child: DirectionalRotation(
                angle: angle,
                child: Container(
                  width: 60.0,
                  height: 60.0,
                  color: Colors.blue,
                ),
              ),
            ),
            Text('当前角度: $angle°'),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: randomizeAngle,
        child: Icon(Icons.refresh),
      ),
    );
  }
}