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

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


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

要为搜索栏设置动画，请用AnimatedContainer和一个Expanded小部件对其进行包装。

编辑

在添加的屏幕截图中，您似乎不想让汉堡包图标消失，因此，所有内容都应使用Stack小部件进行包装，并根据{ {1}}将处理平滑的动画。

Answer 2

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

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();
  }
}

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

2 个答案: