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

来源:6-6 基于StaggeredGridView封装首页双Feed列表

拾年磨一剑

2021-04-19

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

dart版本:2.12.2

flutter版本:2.0.4

http://img.mukewang.com/szimg/607d83b509bfbf6f31300790.jpg

http://img.mukewang.com/szimg/607e18e6095aa47331441422.jpg


第三方插件

http://img.mukewang.com/szimg/607e1a6d0975b95b15680686.jpg

源代码(和老师的一模一样,直接拷贝过来)

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;
}
写回答

3回答

CrazyCodeBoy

2022-02-22

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

0
0

JEFT

2022-02-22

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

0
0

CrazyCodeBoy

2021-04-20

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

0
6
CrazyCodeBoy
回复
拾年磨一剑
新创建一个Flutter项目,将pub中的依赖对齐到课程源码中的版本,试试看,另外,如果还是有问题可以在课程群里小窗口老师,我帮你继续定位下。
2021-04-22
共6条回复

Flutter高级进阶实战-仿哔哩哔哩-掌握Flutter高阶技能

一次性掌握Flutter高阶技能+商业级复杂项目架构设计与开发方案

1722 学习 · 870 问题

查看课程