如何在 flutter 中执行延迟加载或无限加载？

Question

我正在尝试使用 flutter 延迟加载 output。 我只能使用 flutter 给出的生成数组作为示例进行延迟加载。 但是当与 Rest API 集成时，我无法获得相同的 output。 如何在 flutter 中使用 API 执行延迟加载？

Answer 1

我用分页调用 api，这是我的代码：

import 'dart:convert';

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

class TestLazyLoading extends StatefulWidget {
  @override
  _TestLazyLoadingState createState() => new _TestLazyLoadingState();
}

class _TestLazyLoadingState extends State<TestLazyLoading> {
  static const String _url = 'https://api.coinranking.com/v1/public/coins';
  ScrollController controller;
  int _totalCount = 0;
  int _limit = 20;
  int _offset = 0;
  List<String> items = [];
  bool _isLoading = true;

  @override
  void initState() {
    super.initState();
    controller = new ScrollController()..addListener(_scrollListener);
    _getData(limit: _limit, offset: _offset);
  }

  @override
  void dispose() {
    controller.removeListener(_scrollListener);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Scrollbar(
          child: ListView.builder(
            controller: controller,
            itemBuilder: (context, index) {
              if (items.length-1 == index && _isLoading ) {
                return Center(
                  child: CircularProgressIndicator(),
                );
              } else {
                return Container(
                  child: Text(items[index]),
                  height: 38,
                  alignment: Alignment.centerLeft,
                  margin: EdgeInsets.all(5),
                  padding: EdgeInsets.all(10),
                  color: Colors.grey[200],
                );
              }
            },
            itemCount: items.length,
          ),
        ),
      ),
    );
  }

  void _scrollListener() {
    if (controller.position.extentAfter < 50) {
      if (!_isLoading && _totalCount > items.length) {
        _offset += _limit;
        _getData(limit: _limit, offset: _offset);
      }
    }
  }

  void _getData({@required int limit, @required int offset}) async {

    setState(() {
      _isLoading = true;
    });

    http.Response response =
        await http.get('$_url?limit=$limit&offset=$offset');
    if (response.statusCode == 200) {
      var jsonResponse = jsonDecode(response.body);
      _totalCount = jsonResponse['data']['stats']['total'];
      List<dynamic> coinList = jsonResponse['data']['coins'];
      for (dynamic coin in coinList) {
        items.add(coin['symbol']);
      }
      setState(() {
        _isLoading = false;
      });
    }
  }
}

还在您的 pubspec.yaml 中添加 http 的依赖项：

dev_dependencies:
  flutter_test:
    sdk: flutter
  http: ^0.12.1

最后在 main 中调用 TestLazyLoading 小部件进行测试