Flutter FutureBuilder 小部件动态列表长度答案

【问题标题】：Flutter FutureBuilder widget dynamic list lenghtFlutter FutureBuilder 小部件动态列表长度
【发布时间】：2020-08-25 13:20:47
【问题描述】：

我正在尝试在 FutureBuilder 小部件中制作动态 ListView.builder，但无法获得来自 AsyncSnapshot 快照的列表长度。我试过itemCount: snapshot.data.lenght 但没有用。这是我的代码

class FlutterDemo extends StatelessWidget {
  final QuoteStorage storage;

  FlutterDemo({Key key, @required this.storage}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Scrapy on flutter')),
      body: Center(
        child: FutureBuilder(
            future: storage.getQuotes(),
            builder: (context, AsyncSnapshot<Quotes> snapshot) {
              return snapshot.hasData ? ListView.builder(
                itemCount: snapshot.data.lenght,
                itemBuilder: (context, index) {
                  final quotes = snapshot.data;
                  return Card(
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(quotes.items[index].quote),
                      ));
                },
              )
                  : const CircularProgressIndicator();
            }),
      ),
    );
  }
}

数据来自 Quotes 类：

class Quotes extends Items {
  @override
  final List<Quote> items;
  Quotes({
    this.items,
  });

  factory Quotes.fromJson(String str) => Quotes.fromMap(json.decode(str));
  factory Quotes.fromMap(Map<String, dynamic> json) => Quotes(
        items: json["items"] == null
            ? null
            : List<Quote>.from(json["items"].map((x) => Quote.fromMap(x))),
      );
}

并引用用于构建未来的存储类：

class QuoteStorage {
  // ...
  // ...
  Future<Quotes> getQuotes() async {
    final file = await _localFile;
    final contents = await file.readAsString();
    return Quotes.fromJson(contents);
  }
}

如果我不提供动态的 itemCount（从 url 获取），应用程序就会崩溃。有什么想法吗？

【问题讨论】：

标签： listview flutter builder

【解决方案1】：

您收到错误是因为您拼写了length 错误。

您可以通过更正 length 的拼写来解决此问题。用下面的代码替换你的 FlutterDemo 类

效果很好。

class FlutterDemo extends StatelessWidget {
  final QuoteStorage storage;

  FlutterDemo({Key key, @required this.storage}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Scrapy on flutter')),
      body: Center(
        child: FutureBuilder(
            future: storage.getQuotes(),
            builder: (context, AsyncSnapshot<Quotes> snapshot) {
              return snapshot.hasData ? ListView.builder(
                // current the spelling of length here
                itemCount: snapshot.data.length,
                itemBuilder: (context, index) {
                  final quotes = snapshot.data;
                  return Card(
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(quotes.items[index].quote),
                      ));
                },
              )
                  : const CircularProgressIndicator();
            }),
      ),
    );
  }
}

我希望这会有所帮助。

【讨论】：

感谢您在此处指出，我发现需要使用itemCount: snapshot.data.items.length 因为items 是我可以从中获得计数的列表。