制作绕动按钮的最佳方法是什么

Question

我想做这样的事情： https://youtu.be/W3O0077GMlo 我想让旋转的圆圈（此视频中的月亮）充当按钮。

明智地执行此操作的最佳方法是什么？

Answer 1

您可以在RotationTransition小部件内使用Stack来创建旋转动画。在Stack内，将alignment居中，然后将旋转的小部件包装在Align中。将Align小部件的对齐方式属性设置为Alignment.topCenter或任何外部对齐方式。

请记住要在手机的版本上进行部署，以确保动画运行时流畅。

---

快速独立代码示例：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SizedBox(width: 300.0, height: 300.0, child: OrbitingButton()),
        ),
      ),
    );
  }
}

class OrbitingButton extends StatefulWidget {
  @override
  _OrbitingButtonState createState() => _OrbitingButtonState();
}

class _OrbitingButtonState extends State<OrbitingButton>
    with SingleTickerProviderStateMixin {
  AnimationController controller;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(vsync: this);

    controller.repeat(min: 0.0, max: 1.0, period: Duration(seconds: 1));
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: <Widget>[
        RotationTransition(
          turns: controller,
          child: Align(
            alignment: Alignment.topCenter,
            child: Container(
              color: Colors.green,
              height: 30.0,
              width: 30.0,
            ),
          ),
        ),
        RaisedButton(
          child: Text('Button'),
        )
      ],
    );
  }
}