我如何将浮动操作按钮移动到中心颤动 - Dart

在Flutter中，浮动操作按钮(Floating Action Button)是一个常见的UI设计元素。在某些情况下，您可能希望将浮动操作按钮移动到屏幕的中心并使其随着用户的交互而颤动。

以下是一些步骤，可以帮助您实现这个目标:

1. 创建一个带有浮动操作按钮(FAB)的Scaffold

Scaffold(
  appBar: AppBar(
    title: Text('Floating Action Button Demo'),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
);

2. 为FAB添加动画控制器和动画

AnimationController _controller;
Animation<double> _animation;

@override
void initState() {
  super.initState();
  _controller = AnimationController(
      duration: const Duration(milliseconds: 200),
      vsync: this,
  );
  _animation = CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,
  );
  _controller.repeat(
      reverse: true,
  );
}

3. 在Scaffold的floatingActionButton属性中使用Transform.translate

Scaffold(
  appBar: AppBar(
    title: Text('Floating Action Button Demo'),
  ),
  floatingActionButton: Transform.translate(
    offset: Offset(0.0, _animation.value * 16.0),
    child: FloatingActionButton(
      onPressed: () {},
      child: Icon(Icons.add),
    ),
  ),
);

4. 将FAB移动到屏幕中心

Scaffold(
  appBar: AppBar(
    title: Text('Floating Action Button Demo'),
  ),
  floatingActionButton: Transform.translate(
    offset: Offset(0.0, _animation.value * 16.0),
    child: FloatingActionButton(
      onPressed: () {},
      child: Icon(Icons.add),
    ),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
);

现在，您可以在屏幕的中心看到浮动操作按钮，它将随着用户的交互而颤动。

希望这个Flutter教程对您有所帮助！