如何在 flutter 中编写延迟加载的 URL

Question

我制作了一个列表视图，我想让它与延迟加载一起工作。 我通过 php 文件从 MySQL 获取数据。 我的问题是数据没有被剪切。 我在网上找到了示例，通过它我了解我的代码中的问题是什么，但我不明白如何解决它。 我的 URL 关键字的问题。 这是我的 php 文件：

<?php


include 'con.php';



$sql = "SELECT  name FROM User ORDER BY id DESC";


$stmt = $con->prepare($sql); 


$stmt->execute();
$result = $stmt->get_result();
$json = [];
if ($result) {
    while ($row = $result->fetch_assoc()) {
        $json[] = $row;
    }
}
echo json_encode($json, JSON_NUMERIC_CHECK);

?>

这就是我获取数据的方式：

  void _firstLoad() async {
setState(() {
  _isFirstLoadRunning = true;
});

try {


  final res =
  await http.get(Uri.parse("$_baseUrl?_page=$_page&_limit=$_limit"));
  setState(() {
    _posts = json.decode(res.body);
  });
} catch (err) {
  if (kDebugMode) {
    print('Something went wrong');
  }
}

setState(() {
  _isFirstLoadRunning = false;
});}

上面代码中这个关键字的问题：

&_limit=

我应该在这里写什么？ 我从哪里得到这个关键字？ 我是否必须将其添加到 php 文件中？

完整代码：

class _HomePageState extends State<HomePage> {
  //final _baseUrl = 'https://jsonplaceholder.typicode.com/posts';
  final _baseUrl = 'https://***************.php';
  int _page = 0;

  final int _limit = 2;

  bool _isFirstLoadRunning = false;
  bool _hasNextPage = true;

  bool _isLoadMoreRunning = false;

  List _posts = [];

  void _loadMore() async {
  /*  if (_hasNextPage == true &&
        _isFirstLoadRunning == false &&
        _isLoadMoreRunning == false &&
        _controller.position.extentAfter < 300
    ) {
      setState(() {
        _isLoadMoreRunning = true; // Display a progress indicator at the bottom
      });

      _page += 1; // Increase _page by 1

      try {
        final res =
        await http.get(Uri.parse("$_baseUrl?_page=$_page&_limit=$_limit"));

        final List fetchedPosts = json.decode(res.body);
        if (fetchedPosts.isNotEmpty) {
          setState(() {
            _posts.addAll(fetchedPosts);
          });
        } else {

          setState(() {
            _hasNextPage = false;
          });
        }
      } catch (err) {
        if (kDebugMode) {
          print('Something went wrong!');
        }
      }


      setState(() {
        _isLoadMoreRunning = false;
      });
    }*/
  }

  void _firstLoad() async {
    setState(() {
      _isFirstLoadRunning = true;
    });

    try {


      final res =
      await http.get(Uri.parse("$_baseUrl?_page=$_page&_limit=$_limit"));//==== here problem====

      setState(() {
        _posts = json.decode(res.body);
      });
    } catch (err) {
      if (kDebugMode) {
        print('Something went wrong');
      }
    }

    setState(() {
      _isFirstLoadRunning = false;
    });
  }

  late ScrollController _controller;
  @override
  void initState() {
    super.initState();
    _firstLoad();
    _controller = ScrollController()..addListener(_loadMore);

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Your news', style: TextStyle(color: Colors.white),),
        ),
        body:_isFirstLoadRunning?const Center(
          child: CircularProgressIndicator(),
        ):Column(
          children: [
            Expanded(
              child: ListView.builder(
                itemCount: _posts.length,
                controller: _controller,
                itemBuilder: (_, index) => Card(
                  margin: const EdgeInsets.symmetric(
                      vertical: 8, horizontal: 10),
                  child: ListTile(
                    title: Text(_posts[index]['name']),
                   // subtitle: Text(_posts[index]['body']),
                  ),
                ),
              ),
            ),
            if (_isLoadMoreRunning == true)
              const Padding(
                padding: EdgeInsets.only(top: 10, bottom: 40),
                child: Center(
                  child: CircularProgressIndicator(),
                ),
              ),

            if (_hasNextPage == false)
              Container(
                padding: const EdgeInsets.only(top: 30, bottom: 40),
                color: Colors.amber,
                child: const Center(
                  child: Text('You have fetched all of the content'),
                ),
              ),
          ],
        )
    );
  }
}

有人能帮我吗。 谢谢你。

Answer 1

首先，在 PHP 中删除JSON_NUMERIC_CHECK标志。 如果您在数据库中有一个名称，它将是一个数字，它将作为"name"=15而不是"name"="15"发送

在您的 PHP 脚本中，您不使用传递给脚本的参数_page和_limit 。 因此，使用 LIMIT 和 OFFSET 更新您的 SQL 请求，以便对数据进行分页。 在这里，您将在每个 PHP 脚本调用中发送所有数据。

$sql = "SELECT name FROM User ORDER BY id DESC LIMIT " . intval($_GET["_limit"]) . "OFFSET " . intval(_limit) * intval($_GET["_page"]);

当您调用 API 时，请始终检查返回的 responseCode 是否将数据解析为错误：

try {
    final res = await http.get(Uri.parse(`${_baseUrl}?_page=${_page}&_limit=${_limit}`));//==== here problem====

    if (response.statusCode == 200) {
        setState(() {
          _posts = json.decode(res.body);
        });
    }
} catch (err) {
  if (kDebugMode) {
    print('Something went wrong: ' + err.toString());
  }
}