知道应用程序内部的信息作为另一个类中的列表存在，我如何在颤振中使用搜索

Posted 2023-02-23

【中文标题】知道应用程序内部的信息作为另一个类中的列表存在，我如何在颤振中使用搜索

【英文标题】：How can i use the search in flutter knowing that the information inside the application is present as a list in another class

【发布时间】：2020-11-11 05:08:44

【问题描述】：

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

类 Book 扩展 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 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 带到搜索功能的，而我需要从应用程序内部获取数据

【问题讨论】：

尝试添加更多关于您遇到的问题、您尝试过的内容、错误等的详细信息。您似乎已经找到了应该正确打开新页面的 Navigator 推送方法。但在最基本的情况下，可以使用 .where 方法来搜索列表。

【参考方案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(),
        ),
      );
    ],
  ),