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

Posted 2023-02-23

【中文标题】搜索页面上的颤动动画文本字段

【英文标题】：Flutter animation text field on search page

【发布时间】：2020-03-31 06:38:18

【问题描述】：

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

现在我做这个代码

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

【问题讨论】：

解释更多！！！

这样做photos.app.goo.gl/WyS8TWQLhfHZqmK5A

【参考方案1】：

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

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

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

编辑

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

【讨论】：

如果图标的宽度设置为0，则不需要是堆栈。他只需要在图标的0和maxWidth之间来回切换宽度

如果他想让图标消失是正确的，但是在附加的动画中，图标并没有消失，搜索bur只是覆盖了它。

【参考方案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();
  

【讨论】：

是的，我有这门课，但我尝试做这样的动画photos.app.goo.gl/WyS8TWQLhfHZqmK5A