Flutter状态变更但页面未更新：web_scraper分页爬取异常

你的问题核心是点击按钮时只更新了page变量，但没有重新触发爬取新页面数据的操作，所以top2Wall始终是初始化时的旧数据，页面自然不会刷新。以下是具体修复方案：

关键修改点 #

• 点击按钮时，在更新page后立即调用top2Fetch()，发起新的爬取请求
• 优化加载状态处理，避免重复请求
• 可选：如果需要实现「加载更多」（保留之前的图片），将数据赋值改为追加而非替换

修复后的完整代码 #

class Top2 extends Stateful Widget {
  const Top2({Key? key}) : super(key: key);

  @override
  State<Top2> createState() => _Top2State();
}

class _Top2State extends State<Top2> {
  late List<Map<String, dynamic>> top2Wall;
  bool top2Loaded = false;
  int page = 2;
  bool _isLoading = false; // 新增：标记是否正在加载

  void top2Fetch() async {
    if (_isLoading) return; // 防止重复请求
    setState(() {
      _isLoading = true;
      top2Loaded = false; // 切换到加载状态
    });

    final top2Scraper = WebScraper('https://mobile.alphacoders.com');

    try {
      if (await top2Scraper.loadWebPage('/by-category/3?page=$page&quickload=1')) {
        final newWallData = top2Scraper.getElement('div.item > a > img', ['src', 'title']);
        
        // 如果你想替换当前页数据，用下面这行：
        // top2Wall = newWallData;
        
        // 如果你想实现加载更多（保留之前的图片），用下面这行：
        top2Wall.addAll(newWallData);

        print(top2Wall);
      }
    } catch (e) {
      print('爬取失败：$e');
      // 这里可以添加错误提示，比如Toast或SnackBar
    } finally {
      setState(() {
        top2Loaded = true;
        _isLoading = false; // 结束加载状态
      });
    }
  }

  @override
  void initState() {
    super.initState();
    top2Wall = []; // 初始化空列表，避免late变量未初始化问题
    top2Fetch();
  }

  @override
  Widget build(BuildContext context) {
    Size screenSize = MediaQuery.of(context).size;
    return Scaffold(
      body: top2Loaded
          ? Container(
              height: screenSize.height,
              width: double.infinity,
              child: SingleChildScrollView(
                physics: const BouncingScrollPhysics(),
                child: Wrap(children: [
                  for (int i = 1; i < top2Wall.length; i++)
                    WallCard(src: top2Wall[i]['attributes']['src']),
                  // 加载按钮显示加载状态
                  _isLoading
                      ? const SizedBox(
                          height: 100,
                          width: 100,
                          child: Center(child: CircularProgressIndicator(color: Colors.cyanAccent)),
                        )
                      : InkWell(
                          onTap: () {
                            setState(() {
                              page++;
                              print(page);
                            });
                            top2Fetch(); // 新增：触发新的爬取请求
                          },
                          child: Container(
                              height: 100,
                              width: 100,
                              decoration: const BoxDecoration(color: Colors.cyan)),
                        )
                ]),
              ),
            )
          : const Center(
              child: CircularProgressIndicator(color: Colors.cyanAccent),
            ),
    );
  }
}

额外优化说明 #

1. 新增_isLoading变量：防止用户快速点击按钮导致重复请求，同时在加载时把按钮替换为加载指示器，提升用户体验
2. 初始化top2Wall为空列表：避免late变量在异常情况下未初始化的崩溃问题
3. 添加try-catch：处理爬取过程中可能出现的网络错误、解析错误等异常
4. 两种数据更新方式：根据需求选择替换当前页或追加加载更多

内容的提问来源于stack exchange，提问作者Cheems Monarch