在Flutter中,可以将SearchBar放入AppBar中,实现搜索功能。下面是一个完善且全面的答案: 在Flutter中,可以使用AppBar和SearchDelegate来实现将SearchBar放入AppBar的效果。具体步骤如下: 导入所需的库: 代码语言:txt 复制 import 'package:flutter/material.dart'; 创建一个自定义的SearchDelegate类,用于处理搜索逻辑: 代码...
SearchAppBar组件完整代码: import 'package:flutter/material.dart'; import 'package:supervision/common/utils/utils.dart'; class SearchAppBar extends StatefulWidget { final Function(String)? onChange; final Function(String)? onSearch; const SearchAppBar({Key? key, this.onChange, this.onSearch}) : ...
Widget build(BuildContext context) {returnScaffold( appBar: AppBar( title: Text('不简单的搜索条'), actions: [ IconButton( icon: Icon(Icons.search), onPressed: (){ print('搜索按钮被点击了'); showSearch(context: context,delegate: SeachBarDelegate()); } ) ], ), ); } } assets.dart ...
首先我们先来看下AppBar的源码,实现了PreferredSizeWidget类,我们可以知道这个类主要是控制AppBar的高度的,Scaffold脚手架里的AppBar的参数类型就是PreferredSizeWidget类型。 classAppBarextendsStatefulWidgetimplementsPreferredSizeWidget{ ... preferredSize = _PreferredAppBarSize(toolbarHeight, bottom?.preferredSize.height)...
class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flutter Search Bar'), ), body: Center( child: CustomSearchBar(), ), ); } } 这样就可以在页面中显示这个自定义的搜索栏了。
// 单独清除输入框内容 final VoidCallback onClear; // 清除输入框内容并取消输入 final VoidCallback onCancel; // 输入框内容改变 final ValueChanged onChanged; // 点击键盘搜索 final ValueChanged onSearch; @override _SAppBarSearchState createState() => _SAppBarSearchState(); @override Size get...
appBar:AppBar(centerTitle:true,title:Text("用户中心"),//定义顶部导航栏的左侧按钮leading:IconButton(icon:Icon(Icons.menu),onPressed:()=>print("menu"),),//定义顶部导航栏的右侧按钮组actions:<Widget>[IconButton(icon:Icon(Icons.search),onPressed:()=>print("search"),),IconButton(icon:Icon(Ic...
点击微信首页搜索框, 搜索 和取消 按钮同时向左平移,并且AppBar 和Search页同时向上移动,键盘弹出;微信内容页 和底部TabBar 隐藏,搜索页面展示,按住说话 按钮跟随键盘弹出而弹出。 点击搜索页的取消按钮, 搜索 和取消按钮同时向右平移,并且AppBar 和Search页同时向下移动,键盘收起;微信内容页 和底部TabBar 显示,搜索...
}@overrideThemeDataappBarTheme(BuildContext context){//TODO:implement appBarThemereturnsuper.appBarTheme(context); } } 继承SearchDelegate<String>之后需要重写一些方法,这里给定的String类型是指搜索query的类型为String。 List<Widget> buildActions(BuildContext context):这个方法返回一个控件列表,显示为搜索框右边...
2、SearchAppBarState,这里使用的是PreferredSizeWidget 的实现类PreferredSize,用Stack和Offstage让两个布局(常规的appBar和输入框)重合在一起; classSearchAppBarStateextendsState<SearchAppBarWidget>{bool _hasdeleteIcon=false;@overrideWidgetbuild(BuildContext context){// TODO: implement buildreturnnewPreferredSize...