首页瀑布流滚动的时候会偶尔报错

Question

初始化加载的时候并不会报错，下拉滚动的时候会偶尔出现

dart版本：2.12.2

flutter版本：2.0.4

第三方插件

源代码（和老师的一模一样，直接拷贝过来）

import 'package:flutter/material.dart';
import 'package:flutter_bili_app/http/core/hi_error.dart';
import 'package:flutter_bili_app/http/dao/home_dao.dart';
import 'package:flutter_bili_app/model/home_mo.dart';
import 'package:flutter_bili_app/util/color.dart';
import 'package:flutter_bili_app/util/toast.dart';
import 'package:flutter_bili_app/widget/hi_banner.dart';
import 'package:flutter_bili_app/widget/video_card.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

class HomeTabPage extends StatefulWidget {
  final String categoryName;
  final List<BannerMo> bannerList;

  const HomeTabPage({Key key, this.categoryName, this.bannerList})
      : super(key: key);

  @override
  _HomeTabPageState createState() => _HomeTabPageState();
}

class _HomeTabPageState extends State<HomeTabPage>
    with AutomaticKeepAliveClientMixin {
  List<VideoMo> videoList = [];
  int pageIndex = 1;
  bool _loading = false;
  ScrollController _scrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(() {
      var dis = _scrollController.position.maxScrollExtent -
          _scrollController.position.pixels;
      print('dis:$dis');
      //当距离底部不足300时加载更多
      if (dis < 300 && !_loading) {
        print('------_loadData---');
        _loadData(loadMore: true);
      }
    });
    _loadData();
  }

  @override
  void dispose() {
    super.dispose();
    _scrollController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return RefreshIndicator(
      onRefresh: _loadData,
      color: primary,
      child: MediaQuery.removePadding(
          removeTop: true,
          context: context,
          child: StaggeredGridView.countBuilder(
              controller: _scrollController,
              physics: const AlwaysScrollableScrollPhysics(),
              padding: EdgeInsets.only(top: 10, left: 10, right: 10),
              crossAxisCount: 2,
              itemCount: videoList.length,
              itemBuilder: (BuildContext context, int index) {
                //有banner时第一个item位置显示banner
                if (widget.bannerList != null && index == 0) {
                  return Padding(
                      padding: EdgeInsets.only(bottom: 8), child: _banner());
                } else {
                  return VideoCard(videoMo: videoList[index]);
                }
              },
              staggeredTileBuilder: (int index) {
                if (widget.bannerList != null && index == 0) {
                  return StaggeredTile.fit(2);
                } else {
                  return StaggeredTile.fit(1);
                }
              })),
    );
  }

  _banner() {
    return Padding(
        padding: EdgeInsets.only(left: 5, right: 5),
        child: HiBanner(widget.bannerList));
  }

  Future<void> _loadData({loadMore = false}) async {
    _loading = true;
    if (!loadMore) {
      pageIndex = 1;
    }
    var currentIndex = pageIndex + (loadMore ? 1 : 0);
    print('loading:currentIndex:$currentIndex');
    try {
      HomeMo result = await HomeDao.get(widget.categoryName,
          pageIndex: currentIndex, pageSize: 10);
      setState(() {
        if (loadMore) {
          if (result.videoList.isNotEmpty) {
            //合成一个新数组
            videoList = [...videoList, ...result.videoList];
            pageIndex++;
          }
        } else {
          videoList = result.videoList;
        }
      });
      Future.delayed(Duration(milliseconds: 1000), () {
        _loading = false;
      });
    } on NeedAuth catch (e) {
      _loading = false;
      print(e);
      showWarnToast(e.message);
    } on HiNetError catch (e) {
      _loading = false;
      print(e);
      showWarnToast(e.message);
    }
  }

  @override
  bool get wantKeepAlive => true;
}

Answer 1

CrazyCodeBoy 2022-02-22 21:58:35

瀑布流插件内部计算布局触发的log，可以忽略。

Answer 2

JEFT 2022-02-22 18:50:45

你这个解决没呢，我也是这个问题，华为手机

Answer 3

CrazyCodeBoy 2021-04-20 10:08:16

从log上看报错是由于video_card的高度不足导致的，增加些video_card的高度。

• 提问者 拾年磨一剑 #1

  老师，您好，增加video_card的高度之后，上面到第二个错误没有再发生，但是第一个错误还是会产生，并且只会产生一次，多次调试，发现在第5横排的名称出现的时候会产生这个错误

• CrazyCodeBoy 回复 提问者 拾年磨一剑 #2

  对照下这块的课程源码的实现检查下你的代码看是否有出入的地方呢

• 提问者 拾年磨一剑 回复 CrazyCodeBoy #3

  home_tab_page所有相关的代码都拷贝了老师您的代码覆盖了一次，执行后还是会出现同样都问题，检查了一下发现我们都第三方插件版本号不一样，是否会是这个原因导致的。把老师您的第三方插件版本号拷贝过来重新get了一下，发现问题还是存在，好奇怪

点开查看后面3条评论