颤振将高度添加到应用栏 - Dart

在Dart中，应用栏（AppBar）是Scaffold widget中非常常见的子组件。它通常是一个用于在顶部呈现标题、操作按钮等重要信息的片段。然而，有时候你可能希望添加一些动画效果，比如让应用栏上下颤抖(shake)，以吸引用户的注意力。

那么，如何在Dart中实现这样的效果呢？首先，我们需要定义一个StatefulWidget，包含一个AppBar和一个bool型的变量_isShaking，用于控制是否震动。具体代码如下：

class ShakeyAppBar extends StatefulWidget {
  @override
  _ShakeyAppBarState createState() => _ShakeyAppBarState();
}

class _ShakeyAppBarState extends State<ShakeyAppBar> {
  bool _isShaking = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Shakey AppBar'),
      ),
      body: Container(
        child: Center(
          child: Text('Hello, World!'),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _isShaking = true;
          });
          Future.delayed(Duration(seconds: 1), () {
            setState(() {
              _isShaking = false;
            });
          });
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

在上面的代码中，我们在AppBar的title中添加了一个文本“Shakey AppBar”，同时定义了一个浮动操作按钮(FloatingActionButton)，点击按钮后会将_isShaking变量设为true，并在1秒后将其设为false。

接下来，我们需要修改AppBar的样式，使其实现“颤抖”效果。我们可以使用Flutter提供的AnimatedContainer和CurvedAnimation来实现这一效果。具体代码如下：

class _ShakeyAppBarState extends State<ShakeyAppBar>
    with SingleTickerProviderStateMixin {
  ...
  AnimationController _controller;
  Animation<double> _animation;

  @override
  void initState() {
    ...
    _controller =
        AnimationController(vsync: this, duration: Duration(milliseconds: 200));
    _animation =
        CurvedAnimation(parent: _controller, curve: Curves.elasticInOut);
  }

  @override
  void dispose() {
    _controller.dispose();
    ...
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: AnimatedContainer(
          duration: Duration(milliseconds: _isShaking ? 200 : 0),
          curve: Curves.elasticInOut,
          transform: Matrix4.translationValues(
            0.0,
            _isShaking ? -5.0 : 0.0,
            0.0,
          ),
          child: Text('Shakey AppBar'),
        ),
      ),
      ...
    );
  }
}

我们首先在State类中添加AnimationController和Animation对象，并在initState中进行初始化。在AppBar中，我们将title部分改为一个AnimatedContainer，其transform属性可以用来实现上下颤抖的动画效果。我们在AnimatedContainer的duration和curve属性中设置动画时长和缓动函数。

最后，我们可以通过点击FloatingActionButton来触发AppBar的颤抖效果：

floatingActionButton: FloatingActionButton(
  onPressed: () {
    _controller.forward(from: 0.0);
    setState(() {
      _isShaking = true;
    });
    Future.delayed(Duration(seconds: 1), () {
      setState(() {
        _isShaking = false;
      });
    });
  },
  child: Icon(Icons.add),
),

在按钮的onPressed回调函数中，我们除了将_isShaking设为true，还调用了_controller.forward方法来开始动画。

完整代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: ShakeyAppBar()));
}

class ShakeyAppBar extends StatefulWidget {
  @override
  _ShakeyAppBarState createState() => _ShakeyAppBarState();
}

class _ShakeyAppBarState extends State<ShakeyAppBar>
    with SingleTickerProviderStateMixin {
  bool _isShaking = false;
  AnimationController _controller;
  Animation<double> _animation;

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

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: AnimatedContainer(
          duration: Duration(milliseconds: _isShaking ? 200 : 0),
          curve: Curves.elasticInOut,
          transform: Matrix4.translationValues(
            0.0,
            _isShaking ? -5.0 : 0.0,
            0.0,
          ),
          child: Text('Shakey AppBar'),
        ),
      ),
      body: Container(
        child: Center(
          child: Text('Hello, World!'),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _controller.forward(from: 0.0);
          setState(() {
            _isShaking = true;
          });
          Future.delayed(Duration(seconds: 1), () {
            setState(() {
              _isShaking = false;
            });
          });
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

以上是完整代码，你可以拷贝到你的Dart开发环境中，运行查看效果。