Question

我还没有丰富的拍打经验，我很好奇如何实现可以动画化的自定义AppBar。

我只想将一个简单的动画应用于AppBar，这只会更改AppBar的高度。据我了解，AppBar必须是PreferredSizeWidget，并且我想对其进行动画处理以更改高度，我读了几篇文章，但大多数文章使用SilverAppBar。

谢谢。

{{1}}

Answer 1

我已经弄清楚了如何实现自己想要的。所以我返回了PreferredSizeWidget

class CustomRoundedAppBar extends StatelessWidget{
  double height = 100;
  final String title;

  CustomRoundedAppBar(
    this.height,
    this.title);

  @override
  Widget build(BuildContext context) {
    return PreferredSize(
      preferredSize: Size(this.height, this.height),
      child: AnimatedContainer(
        duration: Duration(seconds: 1),
        height: this.height,
        child: new LayoutBuilder(builder: (context, constraint){
          final width =constraint.maxWidth * 8;
          return new ClipRect(
          child: Stack(
            children: <Widget>[
              new OverflowBox(
                maxHeight: double.infinity,
                maxWidth: double.infinity,
                child: new SizedBox(
                  width: width,
                  height: width,
                  child: new Padding(
                    padding: new EdgeInsets.only(
                      bottom: width / 2 - this.height / 3
                      ),
                    child: new DecoratedBox(
                      decoration: new BoxDecoration(
                        color: Colors.indigo,
                        shape: BoxShape.circle,
                        boxShadow: [
                          new BoxShadow(color: Colors.black54, blurRadius: 10.0)
                        ],
                      ),
                    ),
                  ),
                ),
              ),
              new Center(
                child: new Text("${this.title}",
                  style: TextStyle(
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                    shadows: [
                      Shadow(color: Colors.black54, blurRadius: 10.0)
                    ]
                  ),
                )
              ),
            ],
          )
        );
        })
      ),
    );
  }
}

在脚手架上，当按下按钮时我有一个动作，它将改变高度，高度必须在setState（）上

    onPressed: (){
              setState(() {
                this.height = 200;
                this. _appBarTitle = "TEST";
              });
            },

如何在Flutter中为自定义AppBar设置动画？

1 个答案: