如何从搜索结果导航到新页面

问题描述

我正在尝试了解搜索导航，但找不到任何合适的教程向我展示如何在搜索后导航到特定页面。我希望有人能解释我如何做到这一点。

在搜索“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),));
  }
}