Question

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

我已经用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);
  }

如何用获得的地图填充SliverList？

Answer 1

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

disableAutoPan

Answer 2

它应该是通用的-FutureBuilder <？> 那么只有适当的方法才能在snapShot上工作

如何用API数据填充SliverList

2 个答案: