Flutter FutureBuilder widget 动态列表长度

Question

我正在尝试在 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();
            }),
      ),
    );
  }
}

数据来自class 引用:

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 用于构建未来：

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

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

Answer 1

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

您可以通过更正 length 的拼写来解决此问题。将您的 FlutterDemo class 替换为以下代码

它工作得很好。

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();
            }),
      ),
    );
  }
}

希望对您有所帮助。

Flutter FutureBuilder widget 动态列表长度

Flutter FutureBuilder widget dynamic list lenght

listview

builder

flutter