flutter中使用SearchDelegate buildSuggestions時如何自動觸發搜索

Question

現在我在 flutter 2.0.1 中使用 SearchDelegate，這是我的 buildSuggestions 代碼：

@override
  Widget buildSuggestions(BuildContext context) {
    var channelRequest = new ChannelRequest(pageNum: 1, pageSize: 10, name: query);
    if (query.isEmpty) {
      return Container();
    }

    return FutureBuilder(
        future: ChannelAction.fetchSuggestion(channelRequest),
        builder: (context, AsyncSnapshot snapshot) {
          if (snapshot.hasData) {
            List<ChannelSuggestion> suggestions = snapshot.data;
            return buildSuggestionComponent(suggestions, context);
          } else {
            return Text("");
          }
        });
  }


 Widget buildSuggestionComponent(List<ChannelSuggestion> suggestions, BuildContext context) {
    return ListView.builder(
      itemCount: suggestions.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text('${suggestions[index].name}'),
          onTap: () async {
            query = '${suggestions[index].name}';
            
          },
        );
      },
    );
  }

當 select 是推薦文本時，我想自動觸發搜索事件（當我點擊建議文本時，觸發搜索，從服務器端獲取數據並將結果呈現給用戶界面）所以我不需要點擊搜索按鈕。 這是我的搜索代碼：

@override
  Widget buildResults(BuildContext context) {
    var channelRequest = new ChannelRequest(pageNum: 1, pageSize: 10, name: query);
    return buildResultImpl(channelRequest);
  }

  Widget buildResultImpl(ChannelRequest channelRequest) {
    return FutureBuilder(
        future: ChannelAction.searchChannel(channelRequest),
        builder: (context, AsyncSnapshot snapshot) {
          if (snapshot.hasData) {
            List<Channel> channels = snapshot.data;
            return buildResultsComponent(channels, context);
          } else {
            return Text("");
          }
          return Center(child: CircularProgressIndicator());
        });
  }

我應該怎么做才能實施它？ 我試過在 buildSuggestionComponent 中調用buildResults buildSuggestionComponent但它似乎不起作用。

Answer 1

要根據查詢更新數據，您可以在單擊建議時調用 API 以獲取結果，然后使用StreamController將 stream 的結果傳遞給buildResults()方法並調用showResults() 。

我在這里創建一個簡單的應用程序進行演示：

import 'dart:async';

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: Home()));
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final _controller = StreamController.broadcast();

  @override
  dispose() {
    super.dispose();
    _controller.close();
  }

  Future<void> _showSearch() async {
    await showSearch(
      context: context,
      delegate: TheSearch(context: context, controller: _controller),
      query: "any query",
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Search Demo"),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.search),
            onPressed: _showSearch,
          ),
        ],
      ),
    );
  }
}

class TheSearch extends SearchDelegate<String> {
  TheSearch({this.context, this.controller});

  BuildContext context;
  StreamController controller;
  final suggestions =
      List<String>.generate(10, (index) => 'Suggestion ${index + 1}');

  @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) {
    return StreamBuilder(
      stream: controller.stream,
      builder: (context, snapshot) {
        if (!snapshot.hasData)
          return Container(
              child: Center(
            child: Text('Empty result'),
          ));
        return Column(
          children: List<Widget>.generate(
            snapshot.data.length,
            (index) => ListTile(
              onTap: () => close(context, snapshot.data[index]),
              title: Text(snapshot.data[index]),
            ),
          ),
        );
      },
    );
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    final _suggestions = query.isEmpty ? suggestions : [];
    return ListView.builder(
      itemCount: _suggestions.length,
      itemBuilder: (content, index) => ListTile(
          onTap: () {
            query = _suggestions[index];
            // Make your API call to get the result
            // Here I'm using a sample result
            controller.add(sampleResult);
            showResults(context);
          },
          title: Text(_suggestions[index])),
    );
  }
}

final List<String> sampleResult =
    List<String>.generate(10, (index) => 'Result ${index + 1}');

Answer 2

我已經通過一個簡單的解決方法完成了

只需在數據庫調用后添加此行

query = query

但要小心調用循環