在Flutter中,可以将SearchBar放入AppBar中,实现搜索功能。下面是一个完善且全面的答案: 在Flutter中,可以使用AppBar和SearchDelegate来实现将SearchBar放入AppBar的效果。具体步骤如下: 导入所需的库: 代码语言:txt 复制 import 'package:flutter/material.dart'; 创建一个自定义的SearchDelegate类,用于处理搜索逻辑: 代码...
Widget build(BuildContext context) {returnScaffold( appBar: AppBar( title: Text('不简单的搜索条'), actions: [ IconButton( icon: Icon(Icons.search), onPressed: (){ print('搜索按钮被点击了'); showSearch(context: context,delegate: SeachBarDelegate()); } ) ], ), ); } } assets.dart ...
_toggle); @override Widget build(BuildContext context) { return AppBar( title: Stack(children: [ GestureDetector( onTap: _doToggle, child: SizedBox( height: kToolbarHeight * 0.8, child: Row( children: const [ Icon( Icons.search, size: 24.0, ), SizedBox( width: 10.0, ), Text("Search...
SearchAppBar组件完整代码: import'package:flutter/material.dart';import'package:supervision/common/utils/utils.dart';classSearchAppBarextendsStatefulWidget{finalFunction(String)?onChange;finalFunction(String)?onSearch;constSearchAppBar({Key?key,this.onChange,this.onSearch}):super(key:key);@overrideState<...
开发中,页面头部为搜索样式的设计非常常见,为了可以像系统AppBar那样使用,这篇文章记录下在Flutter中自定义一个通用的搜索框AppBar记录。 功能点: 搜索框、返回键、清除搜索内容功能、键盘处理。 效果图 实现步骤 首先我们先来看下AppBar的源码,实现了PreferredSizeWidget类,我们可以知道这个类主要是控制AppBar的高度的...
}@overrideThemeDataappBarTheme(BuildContext context){//TODO:implement appBarThemereturnsuper.appBarTheme(context); } } 继承SearchDelegate<String>之后需要重写一些方法,这里给定的String类型是指搜索query的类型为String。 List<Widget> buildActions(BuildContext context):这个方法返回一个控件列表,显示为搜索框右边...
DefaultTabController( length: 2, child: Scaffold( appBar: AppBar( centerTitle: true, title: const Text("AppBarDemoPage"), leading: IconButton( icon: const Icon(Icons.menu), onPressed: () { print(1244); }, ), actions: [ IconButton( onPressed: () {}, icon: const Icon(Icons.search...
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 显示,搜索...
appBar: AppBar(title: const Text('大前端之旅'), actions: [ // this button is used to open the search modal IconButton( icon: const Icon(Icons.search), onPressed: () => _showModal(context), ) ]), body: Container(), );