代码之家 › 专栏 › 技术社区 › Ian Rehwinkel

颤振中的平稳过渡状态

android-transitions flutter material-design

0

Ian Rehwinkel · 技术社区 · 6 年前

我在两个州之间切换。一个是默认的应用程序栏,另一个是搜索应用程序栏。我要问的是,我如何才能使这种过渡顺利进行,因为目前,它会立即从一种状态跳到另一种状态,看起来相当混乱。这是我的代码:

@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"),
            ],
        ),
    );
}

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

1 回复 | 直到 6 年前

1

2

Rémi Rousselet 6 年前

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,
  ),
)