来自 api 的信息未显示 - Flutter

Question

我对 Flutter 中的 Future builder 有疑问。它从 api 成功获取了信息，但没有显示。当我打印并打印来自 api 的信息时，没问题，它可以毫无问题地显示电影名称。这是我的代码：

class Search extends StatefulWidget {
  final String value;
  Search({Key key, String this.value}) : super(key: key);
  @override
  _SearchState createState() => _SearchState();
}

class _SearchState extends State<Search> {
  var title;

  Future getSearch({index}) async {
    http.Response response = await http.get(
        'https://api.themoviedb.org/3/search/company?api_key=6d6f3a650f56fd6b3347428018a20a73&query=' +
            widget.value);
    var results = json.decode(response.body);
    setState(() {
      this.title = results['results'];
    });
    return title[index]['name'];
  }

  getName(index) {
    return title[index]['name'];
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
          backgroundColor: Color(0xff1d1d27),
          body: Column(
            children: [
              Expanded(
                  child: FutureBuilder(
                initialData: [],
                future: getSearch(),
                builder: (context, snapshot) {
                  return ListView.builder(itemBuilder: (context, index) {
                    Padding(
                      padding:
                          EdgeInsets.symmetric(horizontal: 30, vertical: 20),
                      child: Container(
                        color: Colors.white,
                        child: Text(getName(index).toString()),
                      ),
                    );
                  });
                },
              ))
            ],
          )),
    );
  }
}

Answer 1

请使用这个code，它可以很好地获取名字并将它们显示在列表中，

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class Search extends StatefulWidget {
  final String value;
  Search({Key key, String this.value}) : super(key: key);
  @override
  _SearchState createState() => _SearchState();
}

class _SearchState extends State<Search> {
  var title;
  var results;

  getSearch() async {
    http.Response response = await http.get(
        'https://api.themoviedb.org/3/search/company?api_key=6d6f3a650f56fd6b3347428018a20a73&query=' +
            widget.value);
    results = json.decode(
        response.body); //make it global variable to fetch it everywhere we need
    return results['results'][0]['name'];
  }

  getName(index) {
    return results['results'][index]['name'];
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
          backgroundColor: Color(0xff1d1d27),
          body: Column(
            children: [
              Expanded(
                  child: FutureBuilder(
                // initialData: [],
                future: getSearch(),
                builder: (context, snapshot) {
                  String name =
                      snapshot.data; // to get the data from the getSearch
                  print(name);
                  if (snapshot.hasData) {
                    // if there is data then show the list
                    return ListView.builder(
                        itemCount: results['results']
                            ?.length, // to get the list length of results
                        itemBuilder: (context, index) {
                          return Padding(
                            padding: EdgeInsets.symmetric(
                                horizontal: 30, vertical: 20),
                            child: Container(
                              color: Colors.white,
                              child: Text(getName(index)
                                  .toString()), // pass the index in the getName to get the name
                            ),
                          );
                        });
                  } else {
                    // if there is no data or data is not loaded then show the text loading...
                    return new Text("Loading...",
                        style: TextStyle(fontSize: 42, color: Colors.white));
                  }
                },
              ))
            ],
          )),
    );
  }
}

P.S
学习Futurebuilder基础知识可以看this文章更多学习

我已经对代码进行了注释，以便向您解释更多。

来自 api 的信息未显示 - Flutter

Information from api doesn't show - Flutter

android

listview

flutter

flutter-listview

flutter-futurebuilder