知道应用程序内的信息作为列表存在于另一个 class 中，我如何使用 flutter 中的搜索

Question

在这个应用程序中，我有一个在应用程序中找到的书籍名称列表如何创建搜索 function 并在其中调用列表，然后在单击搜索结果时调用 go 到结果

class 书扩展 StatelessWidget {

  var MainList =[
    {
      'image' : 'images/a_dot_ham.jpeg',
      'name': 'book 1',
      'writer': 'ِmark',
      'date' : '2007',
    },
{
      'image' : 'images/a_dot_ham.jpeg',
      'name': 'book 2',
      'writer': 'ِjon',
      'date' : '2003',
    },
{
      'image' : 'images/a_dot_ham.jpeg',
      'name': 'book 3',
      'writer': 'ِalex',
      'date' : '1997',
    },
  ];

  @override
  Widget build(BuildContext context) {
    return 
    Scaffold(
      appBar: AppBar(
        title: Text('Books'),
        centerTitle: true,
      ),
      body: ListView.builder(
        itemCount: MainList .length,
        itemBuilder: (context , i){
          return
            BookList (
              image :MainList [i]['image'],
              name :MainList [i]['name'] ,
              writer: MainList [i]['writer'],
              date: MainList [i]['date'],
              );},
      ),
    );}
}

接下来 class 是书单出现的地方

class BookList extends StatelessWidget {
  final  image ;
  final name;
  final writer;
  final date;
  BookList({this.name,this.writer,this.image,this.time,this.date});

  @override
  Widget build(BuildContext context) {
    return InkWell(child: Container(
      height: 100,
      width: 100,
      child: Card(
        child: Row(children: <Widget>[
          Expanded( flex: 1,child: Image.network(image),),
          Expanded(flex: 2 ,child: Container(padding: EdgeInsets.only(right: 4),
              alignment: Alignment.topRight,
              child: Column(crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[
                Text(name,style: TextStyle(fontSize: 18)),
                Row(children: <Widget>[
                  Expanded(child: Row(children: <Widget>[Text('date: ') , Text(date,style: TextStyle(color: Colors.grey),)] ),),
                  Expanded(child: Row(children: <Widget>[Text('writer: ') , Text(writer,style: TextStyle(color: Colors.grey),)] ))
                ],),
                Row(children: <Widget>[
                  Expanded(child:Row(children: <Widget>[Text('name: ') , Text(name,style: TextStyle(color: Colors.grey),)] ) ),
                 
                ],),
              ],)),)
        ],),
      ),),
      onTap: (){
        Navigator.of(context).push(MaterialPageRoute(builder: (context){
          return BookDetails(name: name , writer: writer , date: date ,image: image,);
        }
        ));
      },);
  }}

那么如何在搜索栏中调用此列表以及单击特定书籍时会转到其详细信息。

搜索时，我发现解释说的是来自外部数据库的通信，数据是由 url 带到搜索 function 而我需要从应用程序中带来的

Answer 1

添加以下代码：

TextEditingController _textController = TextEditingController();
List<String> newMainList= List.from(MainList);
onItemChanged(String value) {

setState(() {
  newMainList = MainList
      .where((string) => string.toLowerCase().contains(value.toLowerCase()))
      .toList();

    
 });
}

将此添加到您希望搜索栏出现的位置：

   Column(
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.all(12.0),
        child: TextField(
          controller: _textController,
          decoration: InputDecoration(
            hintText: 'Search Here...',
          ),
          onChanged: onItemChanged,
        ),
      ),
      Expanded(
        child: ListView(
          padding: EdgeInsets.all(12.0),
          children: newSightsList.map((data) {
            return ListTile(
              title: Text(data),
              onTap: (){
              //add what to do onTap here
             },
            );
          }).toList(),
        ),
      );
    ],
  ),