搜索页面上的颤动动画文本字段

Question

我正在创建自定义搜索页面。当这个页面打开时，汉堡菜单被隐藏并且搜索文本字段立即改变大小。如何让它顺利进行？

现在我做这个代码

class DefaultAppBar extends StatefulWidget implements PreferredSizeWidget {
  @override
  Size get preferredSize => Size.fromHeight(56.0);

  @override
  _DefaultAppBarState createState() => _DefaultAppBarState ();

}

class _DefaultAppBarState extends State<DefaultAppBar> with TickerProviderStateMixin {
  AnimationController _controller;

  double textWidth = 300.0;

  @override
  void initState() {
    super.initState();


  }

  @override
  Widget build(BuildContext context) {
    var future = new Future.delayed(const Duration(milliseconds: 100), ()=>setState(() {
      textWidth = 400.00;
    }));

    return Stack(
        children: [
      Scaffold(
        appBar:AppBar(
          centerTitle: true,
          automaticallyImplyLeading: false,

          // ...
          title:AnimatedContainer (
            duration: Duration (milliseconds: 500),
            width: loginWidth,

//            color: Colors.red,
            child:  TextField(
              autofocus: true,
              // ...
              decoration: InputDecoration(
                fillColor: Colors.white,
                filled: true,
                prefixIcon: Icon(Icons.arrow_back,color: Colors.grey),
                hintText: 'Search something ...',
                border: OutlineInputBorder(borderRadius: BorderRadius.circular(10), borderSide: BorderSide.none),
                contentPadding: EdgeInsets.zero,


//                border: InputBorder.none,
//                hintText: "My Custom Search Label", // KEY PROP
                hintStyle: TextStyle(color: Colors.red), // KEY PROP
              ),
            ),
          ),


            ),

)


    ]
    );
  }
}

得到这个结果

工作，但不是很顺利以及如何自动计算 textWidth 的开始和结束以及如何制作像这样的动画https://photos.app.goo.gl/mWpdsouLi4csptKb7

Answer 1

1. 要使汉堡图标消失，请使用Visability 小部件将其包裹起来：

Visibility(
  child: ...,
  visible: !_searchIsExpanded,
),

1. 要为搜索栏设置动画，请使用AnimatedContainer 和Expanded 小部件将其包装起来。

编辑

通过添加的屏幕截图，您似乎不希望汉堡图标消失，因此所有内容都应该用 Stack 小部件包裹，并根据如果按下 AnimatedContainer 来更改宽度会处理流畅的动画。

Answer 2

您可以使用 searchDelegate ，您需要创建一个扩展 SearchDelegate 类的新类。 希望这是您qst的正确答案； 这是您应该创建的类的示例：

class CustomSearchDelegate extends SearchDelegate {
  @override
  List<Widget> buildActions(BuildContext context) {
    return [
      IconButton(
        icon: Icon(Icons.clear),
        onPressed: () {
          query = '';
        },
      ),
    ];
  }

  @override
  Widget buildLeading(BuildContext context) {
    return IconButton(
      icon: Icon(Icons.arrow_back),
      onPressed: () {
        close(context, null);
      },
    );
  }

  @override
  Widget buildResults(BuildContext context) {
    if (query.length < 3) {
      return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Center(
            child: Text(
              "Search term must be longer than two letters.",
            ),
          )
        ],
      );
    }

    //Add the search term to the searchBloc. 
    //The Bloc will then handle the searching and add the results to the searchResults stream.
    //This is the equivalent of submitting the search term to whatever search service you are using
    InheritedBlocs.of(context)
        .searchBloc
        .searchTerm
        .add(query);

    return Column(
      children: <Widget>[
        //Build the results based on the searchResults stream in the searchBloc
        StreamBuilder(
          stream: InheritedBlocs.of(context).searchBloc.searchResults,
          builder: (context, AsyncSnapshot<List<Result>> snapshot) {
            if (!snapshot.hasData) {
              return Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Center(child: CircularProgressIndicator()),
                ],
              );
            } else if (snapshot.data.length == 0) {
              return Column(
                children: <Widget>[
                  Text(
                    "No Results Found.",
                  ),
                ],
              );
            } else {
              var results = snapshot.data;
              return ListView.builder(
                itemCount: results.length,
                itemBuilder: (context, index) {
                  var result = results[index];
                  return ListTile(
                    title: Text(result.title),
                  );
                },
              );
            }
          },
        ),
      ],
    );
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    // This method is called everytime the search term changes. 
    // If you want to add search suggestions as the user enters their search term, this is the place to do that.
    return Column();
  }
}