Flutter 详细搜索功能

Question

我目前有一个颤振应用程序，它在网格视图中显示可点击的图像。

选择一张图片后，它会将您带到一个详细页面，其中提供有关所选类别的更多信息：

我现在需要构建基于类别详细信息进行过滤的搜索功能。 因此，如果我搜索“钓鱼”，gridview 过滤器会显示“农业”以及包含该词的任何其他类别详细信息。

我目前使用 Firebase 在用户选择类别时返回类别详细信息，因此我假设搜索必须链接到我的 firebase？

我试过在网上寻找答案，但没有一个能满足我的具体要求。

更新 包含的 Gridview 页面代码：

class _LevelPageState extends State<LevelPage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.grey,
          title: Text(widget.level.data["region"]),
          centerTitle: true,
        ),
        body: ListView(shrinkWrap: true, children: <Widget>[
          Container(
            child: ListTile(
              title: Text(
                'Current Level ' + widget.level.data["level"].toString(),
                style: TextStyle(
                     color: widget.level.data["level"] == 5
                         ? Colors.red[900]
                         : widget.level.data["level"] == 4
                             ? Colors.orange[900]
                             : widget.level.data["level"] == 3
                                 ? Colors.brown[300]
                                 : widget.level.data["level"] == 2
                                     ? Colors.blue[300]
                                     : widget.level.data["level"] == 1
                                         ? Colors.green[300]
                                         : Colors.black,
                    fontSize: 25,
                    fontWeight: FontWeight.bold),
                textAlign: TextAlign.center,
              ),
            ),
          ),
          Container(
            height: (MediaQuery.of(context).size.height),
            padding: EdgeInsets.all(10),
            child: GridView.count(
              shrinkWrap: true,
              physics: ScrollPhysics(),
              mainAxisSpacing: 40,
              crossAxisSpacing: 20,
              crossAxisCount: 3,
              childAspectRatio: MediaQuery.of(context).size.height / 400,
              children: <Widget>[
                ListTile(
                  title: Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(30),
                        color: Colors.grey,
                      ),
                      child: InkWell(
                        enableFeedback: true,
                        child: Image.asset('assets/images/mediaicon.png'),
                        onTap: () => {
                          Navigator.of(context).push(MaterialPageRoute(
                              builder: (context) => CategoryPage(
                                  text1: 'Media',
                                  text2: widget.level.data["region"].toString(),
                                  text3:
                                      widget.level.data["level"].toString())))
                        },
                        splashColor: Colors.white,
                        borderRadius: BorderRadius.circular(20),
                      )),
                  subtitle: Text('Media',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 10,
                      ),
                      textAlign: TextAlign.center),
                ),
                ListTile(
                  title: Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(30),
                        color: Colors.grey,
                      ),
                      child: InkWell(
                        enableFeedback: true,
                        child: Image.asset('assets/images/mobileanditicon.png'),
                        onTap: () => {
                          Navigator.of(context).push(MaterialPageRoute(
                              builder: (context) => CategoryPage(
                                  text1: 'Info and Comms',
                                  text2: widget.level.data["region"].toString(),
                                  text3:
                                      widget.level.data["level"].toString())))
                        },
                        splashColor: Colors.white,
                        borderRadius: BorderRadius.circular(20),
                      )),
                  subtitle: Text('Info and Comms',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 10,
                      ),
                      textAlign: TextAlign.center),
                ),
                ListTile(
                  title: Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(30),
                        color: Colors.grey,
                      ),
                      child: InkWell(
                        enableFeedback: true,
                        child: Image.asset('assets/images/utilitiesicon.png'),
                        onTap: () => {
                          Navigator.of(context).push(MaterialPageRoute(
                              builder: (context) => CategoryPage(
                                  text1: 'Utilities',
                                  text2: widget.level.data["region"].toString(),
                                  text3:
                                      widget.level.data["level"].toString())))
                        }, 
                        splashColor: Colors.white,
                        borderRadius: BorderRadius.circular(20),
                      )),
                  subtitle: Text('Utilities',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 10,
                      ),
                      textAlign: TextAlign.center),
                ),
                ListTile(
                  title: Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(30),
                        color: Colors.grey,
                      ),
                      child: InkWell(
                        enableFeedback: true,
                        child: Image.asset('assets/images/educationicon.png'),
                        onTap: () => {
                          Navigator.of(context).push(MaterialPageRoute(
                              builder: (context) => CategoryPage(
                                  text1: 'Education',
                                  text2: widget.level.data["region"].toString(),
                                  text3:
                                      widget.level.data["level"].toString())))
                        },
                        splashColor: Colors.white,
                        borderRadius: BorderRadius.circular(20),
                      )),
                  subtitle: Text('Education',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 10,
                      ),
                      textAlign: TextAlign.center),
                ),
                ListTile(
                  title: Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(30),
                        color: Colors.grey,
                      ),
                      child: InkWell(
                        enableFeedback: true,
                        child: Image.asset('assets/images/repairsicon.png'),
                        onTap: () => {
                          Navigator.of(context).push(MaterialPageRoute(
                              builder: (context) => CategoryPage(
                                  text1: 'Repairs',
                                  text2: widget.level.data["region"].toString(),
                                  text3:
                                      widget.level.data["level"].toString())))
                        },
                        splashColor: Colors.white,
                        borderRadius: BorderRadius.circular(20),
                      )),
                  subtitle: Text('Repairs',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 10,
                      ),
                      textAlign: TextAlign.center),
                ),
                ListTile(
                  title: Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(30),
                        color: Colors.grey,
                      ),
                      child: InkWell(
                        enableFeedback: true,
                        child:
                            Image.asset('assets/images/domestichelpicon.png'),
                        onTap: () => {
                          Navigator.of(context).push(MaterialPageRoute(
                              builder: (context) => CategoryPage(
                                  text1: 'Domestic Help',
                                  text2: widget.level.data["region"].toString(),
                                  text3:
                                      widget.level.data["level"].toString())))
                        },
                        splashColor: Colors.white,
                        borderRadius: BorderRadius.circular(20),
                      )),
                  subtitle: Text('Domestic Help',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 10,
                      ),
                      textAlign: TextAlign.center),
                ),
              ],
            ),
          ),
        ]));
  }
}

我已将上述代码调整为仅包含 6 个 gridview 图像以缩短代码。

Firebase 上的数据结构：

Answer 1

因此，您必须使用未来的构建器来包装您的代码，该构建器将首先等待您来自 Firebase 的数据。

然后你必须显示任何满足你条件的 GridView 项目（字符串包含用户输入的内容，这里是一个常量：categorySearched）。此外，您可能希望添加 lower 方法以使其不区分大小写。

您将使用 gridview.builder 来实现该目标。

那么你还需要为每个类别映射对应的图标： Map imageMap = {'Education': 'educationicon', 'Business': 'businessicon'}; // 等等。

希望您可以在各处稍作调整，就可以使您的代码完全正常工作。如果您需要更多帮助，请告诉我。

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';

class LevelCategoryMap {
  final String title;
  final String level;
  final String region;

  LevelCategoryMap(this.title, this.level, this.region);

  Map<String, dynamic> toMap() {
    return {
      'title': title,
      'level': level,
      'description': region
    };
  }

  @override
  String toString() {
    return 'LevelCategoryMap{level: $level, description: $region';
  }
}

class _LevelPageState extends State<LevelPage> {
  final String categorySearched = "fishing";
  String level = 1;

  @override
  Widget build(BuildContext context) {
    final dbCollectionSnapshot = Firestore
        .instance
        .collection("Level$level")
        .where('desc', )
        .snapshots(); // retrieve

    return StreamBuilder<QuerySnapshot>(
        stream: dbCollectionSnapshot,
        builder: (context, snapshot) {
          List<LevelCategoryMap> levelCategory;
          if (!snapshot.hasData || snapshot.data == null) return CircularProgressIndicator();
            snapshot.data.documents.forEach((element) {
              levelCategory.add(LevelCategoryMap(element.documentID, level, element.data['desc']));
            })
            final int resultsLen = levelCategory.length;
            return new Scaffold(
                appBar: AppBar(
                  backgroundColor: Colors.grey,
                  title: Text(widget.level.data["region"]),
                  centerTitle: true,
                ),
                body: ListView(shrinkWrap: true, children: <Widget>[
                  Container(
                    child: ListTile(
                      title: Text(
                        'Current Level ' + widget.level.data["level"].toString(),
                        style: TextStyle(
                            color: widget.level.data["level"] == 5
                                ? Colors.red[900]
                                : widget.level.data["level"] == 4
                                ? Colors.orange[900]
                                : widget.level.data["level"] == 3
                                ? Colors.brown[300]
                                : widget.level.data["level"] == 2
                                ? Colors.blue[300]
                                : widget.level.data["level"] == 1
                                ? Colors.green[300]
                                : Colors.black,
                            fontSize: 25,
                            fontWeight: FontWeight.bold),
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ),

                  Center(
                      child: GridView.builder(
                          itemCount: resultsLen,
                          gridDelegate:
                          SliverGridDelegateWithFixedCrossAxisCount(
                              crossAxisCount: 2),
                          itemBuilder: (context, index) {
                            final String description = levelCategory[index].region;
                            if (description.contains(categorySearched))
                              return myGridItem(context, index, levelCategory[index]);
                            //: ClassifiedThumbnail(connection, capitalize(widget.city), snapshot.data[index]);
                          })),
                ]));
          }

          else
            return CircularProgressIndicator();

        });
  }
}


Widget myGridItem(context, index, LevelCategoryMap myLevelCategory) {
  Map<String, String> imageMap = {'Education': 'educationicon', 'Business': 'businessicon'}; // etc.

  return ListTile(
    title: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(30),
          color: Colors.grey,
        ),
        child: InkWell(
          enableFeedback: true,
          child: Image.asset('assets/images/' + imageMap[myLevelCategory.title]  + '.png'),
          onTap: () => {
            Navigator.of(context).push(MaterialPageRoute(
                builder: (context) => CategoryPage(
                    text1: myLevelCategory.title, // I assume level is the name with education
                    text2: myLevelCategory.region,
                    text3: myLevelCategory.level)))
          },
          splashColor: Colors.white,
          borderRadius: BorderRadius.circular(20),
        )),
    subtitle: Text(myLevelCategory.title,
        style: TextStyle(
          color: Colors.white,
          fontSize: 10,
        ),
        textAlign: TextAlign.center),
  );

这将适用于 Firebase。但是请注意，您正在下载的所有内容都在移动设备上进行。在您的情况下，这没什么大不了的，因为您只有 10 个只有文本的类别。但是，如果您想在 firebase 中进行基于搜索的查询，则必须使用此处所述的第三方服务：https://firebase.google.com/docs/firestore/solutions/search