如何解决如何从搜索结果导航到新页面
我正在尝试了解搜索导航,但找不到任何合适的教程向我展示如何在搜索后导航到特定页面。我希望有人能解释我如何做到这一点。
在搜索“Google”后,我想按下它并通过导航重定向到一个新页面。
import 'package:Flutter/material.dart';
class SearchPage extends StatefulWidget {
@override
_SearchPageState createState() => _SearchPageState();
}
class _SearchPageState extends State<SearchPage> {
Widget appBarTitle = Text(
"Search",style: TextStyle(color: Colors.white),);
Icon actionIcon = Icon(
Icons.search,color: Colors.white,);
final key = GlobalKey<ScaffoldState>();
final TextEditingController _searchQuery = TextEditingController();
List<String> _list;
bool _isSearching;
String _searchText = "";
_SearchPageState() {
_searchQuery.addListener(() {
if (_searchQuery.text.isEmpty) {
setState(() {
_isSearching = false;
_searchText = "";
});
} else {
setState(() {
_isSearching = true;
_searchText = _searchQuery.text;
});
}
});
}
@override
void initState() {
super.initState();
_isSearching = false;
initData();
}
void initData() {
_list = List();
_list.add("google");
_list.add("IOS");
_list.add("Android");
_list.add("Linux");
_list.add("MacOS");
_list.add("Windows");
}
@override
Widget build(BuildContext context) {
return new Scaffold(
key: key,appBar: buildBar(context),body: new ListView(
padding: new EdgeInsets.symmetric(vertical: 8.0),children: _isSearching ? _buildSearchList() : _buildList(),),);
}
List<ChildItem> _buildList() {
return _list.map((contact) => new ChildItem(contact)).toList();
}
List<ChildItem> _buildSearchList() {
if (_searchText.isEmpty) {
return _list.map((contact) => new ChildItem(contact))
.toList();
}
else {
List<String> _searchList = List();
for (int i = 0; i < _list.length; i++) {
String name = _list.elementAt(i);
if (name.toLowerCase().contains(_searchText.toLowerCase())) {
_searchList.add(name);
}
}
return _searchList.map((contact) => new ChildItem(contact))
.toList();
}
}
Widget buildBar(BuildContext context) {
return new AppBar(
centerTitle: true,title: appBarTitle,actions: <Widget>[
new IconButton(icon: actionIcon,onpressed: () {
setState(() {
if (this.actionIcon.icon == Icons.search) {
this.actionIcon = new Icon(Icons.close,);
this.appBarTitle = new TextField(
controller: _searchQuery,style: new TextStyle(
color: Colors.white,decoration: new Inputdecoration(
prefixIcon: new Icon(Icons.search,color: Colors.white),hintText: "search...",hintStyle: new TextStyle(color: Colors.white)
),);
_handleSearchStart();
}
else {
_handleSearchEnd();
}
});
},]
);
}
void _handleSearchStart() {
setState(() {
_isSearching = true;
});
}
void _handleSearchEnd() {
setState(() {
this.actionIcon = new Icon(Icons.search,);
this.appBarTitle =
new Text("search",style: new TextStyle(color: Colors.white),);
_isSearching = false;
_searchQuery.clear();
});
}
}
class ChildItem extends StatelessWidget {
final String name;
ChildItem(this.name);
@override
Widget build(BuildContext context) {
return new ListTile(title: new Text(this.name));
}
}
解决方法
您也可以使用 SearchDelegate
来实现。
buildSuggestions
下的查询和导航。
@override
Widget buildSuggestions(BuildContext context) {
final suggestionsList = query.isEmpty
? myList
: myList
.where((p) => p.toLowerCase().contains(query.toLowerCase()))
.toList();
return ListView.builder(
itemBuilder: (context,index) => ListTile(
onTap: () {
close(context,suggestionsList[index]);
Navigator.push(
context,MaterialPageRoute(
builder: (context) => DetailScreen(myList
.indexWhere((item) => item == suggestionsList[index]))));
},title: Text(suggestionsList[index]),),itemCount: suggestionsList.length,);
}
important part 将 yourList 的 index
与建议列表 index
配对:
MaterialPageRoute(
builder: (context) => DetailScreen(myList
.indexWhere((item) => item == suggestionsList[index])))
以下是所有带导航的代码。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,home: HomePage(),);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Search Example"),actions: [
IconButton(
icon: Icon(Icons.search),onPressed: () {
showSearch(context: context,delegate: SearchItem());
}),],);
}
}
final List<String> myList = [
"google","IOS","Android","Linux","MacOS","Windows"
];
class SearchItem extends SearchDelegate<String> {
@override
List<Widget> buildActions(BuildContext context) {
return [
IconButton(
icon: Icon(Icons.clear),onPressed: () {
query = "";
})
];
}
@override
Widget buildLeading(BuildContext context) {
return IconButton(
icon: AnimatedIcon(
icon: AnimatedIcons.menu_arrow,progress: transitionAnimation,onPressed: () {
close(context,null);
});
}
@override
Widget buildResults(BuildContext context) {}
@override
Widget buildSuggestions(BuildContext context) {
final suggestionsList = query.isEmpty
? myList
: myList
.where((p) => p.toLowerCase().contains(query.toLowerCase()))
.toList();
return ListView.builder(
itemBuilder: (context,);
}
}
class DetailScreen extends StatelessWidget {
final int index;
DetailScreen(this.index);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("${myList[index]}"),body: Center(
child: Text(
"${myList[index]}",style: TextStyle(fontSize: 22),));
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。