Flutter ListVİew 总是在向上或向下滚动时重新渲染

Posted 2023-02-23

【中文标题】Flutter ListVİew 总是在向上或向下滚动时重新渲染

【英文标题】：Flutter ListVİew always rerenders when scroll-up or scroll-down

【发布时间】：2020-10-21 18:49:18

【问题描述】：

我的颤振应用有问题。我刚刚在我的列表视图中调用了一些小部件。我的小部件使用 Api Data（http，futurebuilder）。但是当我向上或向下滚动时，我的小部件会重新呈现或调用。我把所有的 api 方法都称为 initstate()。

我不明白，有什么问题？

SCREEN1

SCREEN 2 is my problem.

HomeScreen.dart：

    ...
    ListView(
      children: <Widget>[
        MainHeadlineMod(),
        SizedBox(
          height: 30.0,
        ),
        CategoryMod(
          categoryId: 19,
        ),
        SizedBox(
          height: 30.0,
        ),
        CategoryMod(
          categoryId: 15,
        ),
        SizedBox(
          height: 30.0,
        ),
        CategoryMod(
          categoryId: 20,
        ),
        SizedBox(
          height: 30.0,
        ),
        CategoryMod(
          categoryId: 14,
        ),
        SizedBox(
          height: 30.0,
        ),
        CategoryMod(
          categoryId: 16,
        ),
      ],
    ),
    ...

CategoryMod.dart：

    ...
    class _CategoryModState extends State<CategoryMod> 
    final WebService ws = WebService();
    Future<List<ShortNewsModel>> _futureCategoryNews;

    @override
    void initState() 
        _futureCategoryNews = ws.fetchCategoryNews(widget.categoryId);
        super.initState();
    

    @override
    Widget build(BuildContext context) 
        return Container(
        child: FutureBuilder<List<ShortNewsModel>>(
            future: _futureCategoryNews,
            builder: (context, snapshot) 
            if (snapshot.hasData) 
    ...

【参考方案1】：

您将需要使用 Listview.builder 而不是 Listview。在这种情况下，您可以避免使用 FutureBuilder。如果需要修改，请提供完整代码

【讨论】：

感谢您的帮助。我用另一种方式解决了这个问题。

列表是否会变小。如果你有这个包含 100 多个项目的列表怎么办.. Listview.builder 将构建需要构建的项目数量，并且它对性能也更好

【参考方案2】：

我解决了我的问题。我在“HomeScreen.dart”中使用了“Column()”而不是“ListView()”。之后我用 SingleChildScrollView() 覆盖了 Column()。我认为 ListView() 总是重新渲染（或重绘或 Idk）列表。

HomeScreen.dart：

    ...
    SingleChildScrollView(
      child: Column(
        children: <Widget>[
          MainHeadlineMod(),
          SizedBox(
            height: 30.0,
          ),
          CategoryMod(
            categoryId: 19,
          ),
          SizedBox(
            height: 30.0,
          ),
          CategoryMod(
            categoryId: 15,
          ),
          SizedBox(
            height: 30.0,
          ),
          CategoryMod(
            categoryId: 20,
          ),
          SizedBox(
            height: 30.0,
          ),
          CategoryMod(
            categoryId: 14,
          ),
          SizedBox(
            height: 30.0,
          ),
          CategoryMod(
            categoryId: 16,
          ),
        ],
      ),
    ),
    ...

感谢您的帮助。

【参考方案3】：

使用 ListView cacheExtent 参数（高像素）