Flutter：在 http.get 请求之后构建 ListView

Question

我觉得这个问题不应该花 6 个多小时来解决，但我在这里经过大量搜索和玩弄代码。 基本上，当我导航到页面时，future 会自动从 _getData() 发送 http.get 请求。我正在获取数据并构建一个 ListView 就好了，问题是我希望 ListView 仅在从 TextField 提交搜索词之后构建。任何帮助将不胜感激！

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

class FutureBuilderTestPage extends StatefulWidget {
  @override
  BuilderTestPageState createState() => BuilderTestPageState();
}

class BuilderTestPageState extends State {
  static String _searchTerm = "";
  String _url = "https://api.nal.usda.gov/ndb/search/?format=json&q=$_searchTerm&sort=n&max=20&offset=0&api_key=OMITTEDforThisPost";
  @override
  Widget build(BuildContext context) {
    var _futureBuilder = new FutureBuilder(
        future: _getData(),
        builder: (BuildContext context, AsyncSnapshot snapshot) {
            switch (snapshot.connectionState) {
              case ConnectionState.none:
                return Text('Press button to start.');
              case ConnectionState.active:
              case ConnectionState.waiting:
                return Text('Awaiting result...');
              case ConnectionState.done:
                if (snapshot.hasError) return Text('Error: ${snapshot.error}');
                // return Text('Result: ${snapshot.data}');
                return createMyListView(context, snapshot);
            }
            return null; // unreachable
        });
    return new Scaffold(
        appBar: new AppBar(
          title: Text("Appbar"),
        ),
        body: Column(
          children: <Widget>[
            Text("Search for food..."),
            TextField(
              decoration: InputDecoration(hintText: 'Search here'),
              onSubmitted: (String valueIn) {
                _searchTerm = valueIn;
              },
            ),
            Text("Results for... " + _searchTerm),
            Divider(height: 4.0),
            Expanded(child: _futureBuilder),
          ],
        ));
  }

  Future<List<dynamic>> _getData() async {
    http.Response response = await http.get(_url,
        headers: {"Accept": "Application/json"});

    final data = jsonDecode(response.body) as Map;
    final mapOfList = data['list'] as Map;
    final listOfItem = mapOfList['item'] as List<dynamic>;

    print(listOfItem.toString());

    var values = new List<dynamic>();
    for (var e in listOfItem) {
      values.add(e);
    }
    return values;
  }

  Widget createMyListView(BuildContext context, AsyncSnapshot snapshot) {
    List<dynamic> values = snapshot.data;
    return new ListView.builder(
      itemCount: values.length,
      itemBuilder: (BuildContext context, int index) {
        return new Column(
          children: <Widget>[
            new ListTile(
              title: new Text(values[index]['name']),
            )
          ],
        );
      },
    );
  }
}

class FoodObjectFromJson {
  final int offset;
  final String group;
  final String name;
  final int ndbno;
  final String ds;
  final String manu;

  FoodObjectFromJson(
      this.offset, this.group, this.name, this.ndbno, this.ds, this.manu);
}

Answer 1

为了回答您的问题，我简化/修改了一些代码，因此不需要网络调用。

注意布尔变量“show_results”的声明。这是你想做的事情的关键。确保记下变量的所有用法。

在两个 setState () 构造中，它首先关闭所需列表的可见性/存在性，然后在执行搜索后打开所需列表的可见性/存在性。

此代码已经过测试，如图所示。

希望这会有所帮助。

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

class zFutureBuilderTestPage extends StatefulWidget {
  @override
  zBuilderTestPageState createState() => zBuilderTestPageState();
}

class zBuilderTestPageState extends State {
  static String _searchTerm = "";

  bool show_results=false;

  String _url = "https://www.awebsite.com/search.php";
  @override
  Widget build(BuildContext context) {
    var _futureBuilder = new FutureBuilder(
        future: _getData(),
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          switch (snapshot.connectionState) {
            case ConnectionState.none:
              return Text('Press button to start.');
            case ConnectionState.active:
            case ConnectionState.waiting:
              return Text('Awaiting result...');
            case ConnectionState.done:
              if (snapshot.hasError) return Text('Error: ${snapshot.error}');
              // return Text('Result: ${snapshot.data}');
              return createMyListView(context, snapshot);
          }
          return null; // unreachable
        });
    return new Scaffold(
        appBar: new AppBar(
          title: Text("Appbar"),
        ),
        body: Column(
          children: <Widget>[
            Text("Search for food..."),
            TextField(
              decoration: InputDecoration(hintText: 'Search here'),
              onSubmitted: (String valueIn) => search(valueIn),
            ),
            Text("Results for... " + _searchTerm),
            Divider(height: 4.0),
            show_results == false ? new Container ( width: 0, height: 0 ) : Expanded(child: _futureBuilder),
          ],
        ));
  }

  Future <List<dynamic>> search ( String valueIn ) async {
    print (valueIn);
    setState(() {
      show_results=false;
    });

    List<dynamic> l = await _getData();

    setState(() {
      show_results=true;
    });
    return ( l );
  }

  Future<List<dynamic>> _getData() async {

    List<FoodObjectFromJson> values=new List();
    FoodObjectFromJson H =new FoodObjectFromJson(5,"Orange");
    values.add( H );
    FoodObjectFromJson H2 =new FoodObjectFromJson(8,"Apple");
    values.add( H2 );
    FoodObjectFromJson H3 =new FoodObjectFromJson(22,"Pear");
    values.add( H3 );


    return values;
  }

  Widget createMyListView(BuildContext context, AsyncSnapshot snapshot) {
    List<dynamic> values = snapshot.data;
    return new ListView.builder(
      itemCount: values.length,
      itemBuilder: (BuildContext context, int index) {
        return new Column(
          children: <Widget>[
            new ListTile(
              title: new Text(values[index].fruit_handle),
            )
          ],
        );
      },
    );
  }
}

class FoodObjectFromJson {
  final int fruit_id;
  final String fruit_handle;

  FoodObjectFromJson(
      this.fruit_id, this.fruit_handle);
}