flutter - 如何用 API 数据填充 SliverList

Question

我正在构建一个天气预报应用程序，其中 SliverAppBar 显示当前天气，SliverList 以卡片形式显示每日预报。我以 map 的形式从 DarkSky API 获取数据。

我已经使用 FutureBuilder 完成了当前天气部分，但现在我无法找到如何填充 SliverList。我也尝试用 FutureBuilder 来做，但没有成功。

这是我的代码

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(

        body: new CustomScrollView(
          slivers: <Widget>[
            new SliverAppBar(
              brightness: Brightness.dark,
              centerTitle: true,
              title: Text('Weather'),
              expandedHeight: 300,
              floating: true,
              pinned: true,
              snap: true,
              flexibleSpace: FlexibleSpaceBar(
                  background: new Container(
                child: updateCurrentWeather(), //METHOD CONSTRUCTING CONTENT OF SliverAppBar
              )),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                  (context, index) => Card(
                        margin: EdgeInsets.fromLTRB(30, 3, 30, 3),
                        color: Colors.black12,
                        child: new ListTile(
                          leading: Icon(Icons.watch_later),
                          title: new Text('$index',
                              style: new TextStyle(color: Colors.white)),
                          subtitle: new Text('29 °C'),
                        ),
                      ),
                  childCount: 20),
            )
          ],
        ));
  }

  Future<Map> getWeather(String key, double lat, double lon) async {
    String apiUrl =
        'https://api.darksky.net/forecast/$key/$lat,$lon?lang=sk&units=si';
    http.Response response = await http.get(apiUrl);
    return json.decode(response.body);
  }

如何用我得到的 map 填充 SliverList？

Answer 1

您可以使用这些代码，但请记住为 http 响应创建您自己的模型以填充列表:

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {

@override
Widget build(BuildContext context) {
    return new Scaffold(

       body: new CustomScrollView(
          slivers: <Widget>[
          new SliverAppBar(
            brightness: Brightness.dark,
            centerTitle: true,
            title: Text('Weather'),
            expandedHeight: 300,
            floating: true,
            pinned: true,
            snap: true,
            flexibleSpace: FlexibleSpaceBar(
                background: new Container(
                  child: updateCurrentWeather(), //METHOD CONSTRUCTING CONTENT OF SliverAppBar
                )),
         ),
          FutureBuilder(
           future: getWeather(
               "secret key", 37.8267, -122.4233),
           builder: (context, projectSnap) {
 //                Whether project = projectSnap.data[index]; //todo check your model
             var childCount = 0;
             if(projectSnap.connectionState !=
                 ConnectionState.done || projectSnap.hasData == null)
               childCount  = 1;
             else
               childCount = projectSnap.data.length;
             return SliverList(
              delegate: SliverChildBuilderDelegate(
                      (context, index) {
                    if (projectSnap.connectionState !=
                        ConnectionState.done) { //todo handle state
                      return CircularProgressIndicator(); //todo set progress bar
                    }
                    if (projectSnap.hasData == null) {
                      return Container();
                    }
                    return Card(
                      margin: EdgeInsets.fromLTRB(30, 3, 30, 3),
                      color: Colors.black12,
                      child: new ListTile(
                        leading: Icon(Icons.watch_later),
                        title: new Text("$index",
                            style: new TextStyle(color: Colors.white)),
                        subtitle: new Text('29 °C'), //todo set your data from response
                      ),
                    );
                  },
                  childCount: childCount),
            );
          },
        ),
      ],
    ));
}

Future<Map> getWeather(String key, double lat, double lon) async {
 String apiUrl =
    'https://api.darksky.net/forecast/$key/$lat,$lon?lang=sk&units=si';
 http.Response response = await http.get(apiUrl);
 return json.decode(response.body);
}

}