Flutter Floor执行大量查询时UI卡顿问题求助

数据表中存在8000余条记录，使用通用关键词进行搜索时，UI出现冻结，无法进行任何屏幕操作。

相关代码 #

Dao层代码 #

@Query(
      'SELECT * FROM ${DataConstants.tableSchool} WHERE instr(name, :keyword) > 0 OR instr(kana, :keyword) > 0 OR instr(cd, :keyword) > 0')
  Future<List<SchoolEntity>> getListSchoolsByKeyword(String keyword);

View层代码 #

@override
  void initState() {
    debounce(controller.keyword, (keyword) async {
      controller.listSchool.value =
          await controller.getKokoByKeywordUseCase(keyword as String);
    }, time: Duration(milliseconds: 500));
    searchFocusNode.addListener(onFocusChange);
    _animationController = AnimationController(
      duration: Duration(milliseconds: 150),
      vsync: this,
    );
    final Animation<double> curve =
        CurvedAnimation(parent: _animationController, curve: Curves.easeIn);
    _animation = IntTween(begin: 100, end: 0).animate(curve);
    _animation.addListener(
        () => controller.animationSearchBox.value = _animation.value);
    super.initState();
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CommonAppBar(
        title: "検索",
        centerTitle: true,
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            _buildSearchBox(),
            Gaps.vLine,
            Obx(
              () => _buildBorderList(),
            )
          ],
        ),
      ),
    );
  }

Widget _buildBorderList() {
    return Padding(
      padding: const EdgeInsets.symmetric(
        vertical: DimensRes.sp22,
        horizontal: DimensRes.sp16,
      ),
      child: Container(
        padding: const EdgeInsets.symmetric(
          horizontal: DimensRes.sp16,
        ),
        decoration: BoxDecoration(
          borderRadius: const BorderRadius.all(Radius.circular(DimensRes.sp10)),
          border: Border.all(color: ColorsRes.borderList),
        ),
        child: SizedBox(
          height: 500,
          child: ListView.builder(
              physics: ScrollPhysics(),
              shrinkWrap: true,
              itemBuilder: (ctx, idx) {
                return _buildSchoolCard(controller.listSchool[idx]);
              },
              // separatorBuilder: (ctx, idx) {
              //   return Gaps.vLine;
              // },
              itemCount: controller.listSchool.length),
        ),
      ),
    );
  }

问题排查与解决 #

经排查，问题根源在于未给ListView设置固定高度，导致一次性渲染大量记录引发UI卡顿。为ListView外层添加固定高度的SizedBox后，问题得到解决。

内容的提问来源于stack exchange，提问作者Vũ Thao