material-design - 在 Flutter 中平滑地转换状态

Question

我在两种状态之间切换。一个是默认应用栏，另一个是搜索应用栏。我要问的是，我如何才能使这种过渡平稳，因为此刻，它会立即从一种状态跳到另一种状态，看起来非常具有破坏性。这是我的代码:

@override
Widget build(BuildContext context) {
    var appBar;
    if(isSearching){
        appBar = AppBar(
            title: Text("SEARCH"),
            leading: IconButton(
                onPressed: (){
                        stopSearch();
                    },
                icon: Icon(Icons.arrow_back),
            ),
        );
    }else{
        appBar = AppBar(
            title: Text(widget.title),
            actions: <Widget>[
                IconButton(
                    onPressed: (){
                        startSearch();
                    },
                    icon: Icon(Icons.search, color: Colors.white,),
                ),
            ],
        );
    }

    return Scaffold(
        appBar: appBar,
        body: ListView(
            children: <Widget>[
                Text("PETER"),
                Text("PETER"),
                Text("PETER"),
                Text("PETER"),
            ],
        ),
    );
}

我希望它像 Material 设计文档中那样:https://material.io/design/navigation/search.html#expandable-search

Answer 1

您可以使用 AnimatedCrossFade在两个小部件之间有淡入淡出的动画

AppBar(
  title: AnimatedCrossFade(
    duration: Duration(milliseconds: 250),
    firstChild: Text("Title"),
    secondChild: TextField(),
    alignment: Alignment.centerLeft,
    layoutBuilder: (w1, _, w2, __) {
      return Container(
        height: 43.0,
        width: double.infinity,
        child: Stack(
          alignment: Alignment.centerLeft,
          children: <Widget>[w1, w2],
        ),
      );
    },
    crossFadeState:
        !searching ? CrossFadeState.showSecond : CrossFadeState.showFirst,
  ),
)