Flutter:具有StreamBuilder和QuerySnapshot的搜索功能

时间:2020-06-08 15:24:39

标签: flutter search dart stream-builder

由于我有非常相似的要求,因此我试图在Boring Show之后在YouTube上构建搜索功能。

我有一个StreamBuilder查询Firestore实例。我试图将数据传递给AppBar操作。只是不知道该怎么做。

我在搜索委托中具有以下代码和后两个功能。我很欣赏它是主要功能:(

class ModelListPage extends StatefulWidget {
  final String catCard;
  ModelListPage({this.catCard});
  @override
  _ModelListPageState createState() => _ModelListPageState(catCard);
}

class _ModelListPageState extends State<ModelListPage> {
  String myNames;
  _ModelListPageState(this.myNames);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //backgroundColor: Color.fromRGBO(58, 66, 86, 1.0),
      appBar: AppBar(
        elevation: 0.1,
        centerTitle: true,
        backgroundColor: Color.fromRGBO(36, 36, 36, 1.0),
        title: Text(myNames),
        actions: <Widget>[
          IconButton(
              icon: Icon(
                Icons.search,
                color: Colors.white,
              ),
              onPressed: () {
                showSearch(context: context, delegate: ModelSearch());
              })
        ],
      ),
      body: StreamBuilder(
        stream: Firestore.instance
            .collection('models')
            .where("Location", isEqualTo: myNames)
            .snapshots(),
        builder: (_, AsyncSnapshot<QuerySnapshot> snapshot) {
          var documents = snapshot.data?.documents ?? [];
          var modeldata =
              documents.map((snapshot) => MyData.from(snapshot)).toList();
          return MyPage(modeldata);
        },
      ),
    );
  }
}

class MyPage extends StatefulWidget {
  final List<MyData> allMyData;
  MyPage(this.allMyData);
  @override
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Expanded(
              child: SafeArea(
                  child: ListView.builder(
                      scrollDirection: Axis.vertical,
                      shrinkWrap: true,
                      itemCount: widget.allMyData.length,
                      itemBuilder: (context, index) {
                        return MyCard(widget.allMyData[index]);
                      }))),
        ],
      ),
    );
  }
}

class ModelSearch extends SearchDelegate<List<MyData>> {
  @override
  List<Widget> buildActions(BuildContext context) {
    return [
      IconButton(
          icon: Icon(
            Icons.clear,
          ),
          onPressed: () {
            query = '';
          })
    ];
  }

  @override
  Widget buildLeading(BuildContext context) {
    return IconButton(
        icon: Icon(Icons.arrow_back),
        onPressed: () {
          close(context, null);
        });
  }

  @override
  Widget buildResults(BuildContext context) {
    return Container();
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    return Container( );
  }
}

我尝试再次运行流构建器,但这意味着要对Firestore进行2次调用。

@override
  Widget buildSuggestions(BuildContext context) {
    return StreamBuilder(
        stream: Firestore.instance
            .collection('models')
            .where("Location", isEqualTo: myNames)
            .snapshots(),
        builder: (_, AsyncSnapshot<QuerySnapshot> snapshot) {
          var documents = snapshot.data?.documents ?? [];
          var modeldata =
              documents.map((snapshot) => MyData.from(snapshot)).toList();
          return MyPage(modeldata);
        },
      );
  }

我不确定从AppBar传递给ModelSearch()的信息。

我试图从另一个问题:Answer那里获得答案,但是在这种情况下,将在生成快照后调用搜索功能。

我还尝试将var文档更改为全局var,但这引发了错误,说List无法映射到List

任何关于buildSuggestions()的建议都会对我有很大帮助。

Boring Show implementation

0 个答案:

没有答案