Question

我有一个带有Tabview的搜索屏幕，其中包含2个标签。启动时，每个选项卡中都有一个空容器。当用户运行搜索时，我想根据结果为每个选项卡生成一个gridview。

到目前为止，这是我的代码，

Widget tvScreen = new Container();
Widget movieScreen = new Container();

Widget build(BuildContext context) {
return MaterialApp(
  home: DefaultTabController(
    length: 2,
    child: Scaffold(
      appBar: AppBar(
        bottom: TabBar(
            tabs: [
              Tab(text: "TV Shows"),
              Tab(text: "Movies"),
            ]),
        centerTitle: true,
        title: Padding(
          padding: const EdgeInsets.only(right: 17.0),
          child: new TextField(
            autofocus: true,
            style: new TextStyle(
              fontSize: 18.0,
            ),
            controller: _searchField,
            decoration: InputDecoration(
                hintText: "Enter TV Show or Movie...."
            ),
          ),
        ),
        actions: <Widget>[
          IconButton(
            splashColor: Colors.white,
            icon: Icon(Icons.search),
            onPressed: _runSearch,
          ),
        ],
        // MD2: make the color the same as the background.
        backgroundColor: backgroundColor,
        // Remove box-shadow
        elevation: 18.00,
      ),
      body: TabBarView(
          children: [
            tvScreen,
            movieScreen,
          ]),
    ),
  ),
);

这就是我从API获取数据的方式

Future<String> getResults() async{

List<ResultsModel> _searchResults = [];
if (_searchField.text.isEmpty != true){
  String _searchParam = _searchField.text.replaceAll(r" ", "%20");

  String _apiKeyMovie = "https://api.themoviedb.org/3/search/movie?"
      "api_key=b52e4dea6f4284&language=en-US&"
      "query=$_searchParam&include_adult=true";

  var data = await http.get(_apiKeyMovie);
  var jsonData = jsonDecode(data.body);

  print("Show JSON");
  print(jsonData);
  if (jsonData != null) {

    int totalResults = jsonData["results"].length;

    if (totalResults != 0){
      int counter = 0;

      while (counter != totalResults) {
        if (jsonData["results"][counter]["poster_path"] != null){

          ResultsModel result = ResultsModel(
              true, jsonData["results"][counter]["title"],
              jsonData["results"][counter]["id"],
              "http://image.tmdb.org/t/p/w185/${jsonData["results"][counter]["poster_path"]}");

          _searchResults.add(result);
          counter = counter + 1;
        } else counter = counter + 1;

      }
    }
  }
}

searchResults = _searchResults;
return "Done!";

按下按钮即可进行切换

_runSearch(){
getResults();

setState(() {
  //Change tabview contents
  tvScreen = _uiBodyTV();
  movieScreen = _uiBodyMovie();
});

Answer 1

您应该考虑使用FutureBuilder小部件。

Watch this video

Answer 2

使用Streambuilder和Google的BLOC设计流程能够达到预期的效果。

异步功能后更改正文

2 个答案: