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

【问题标题】：Flutter ListVİew always rerenders when scroll-up or scroll-downFlutter ListVİew 总是在向上或向下滚动时重新渲染
【发布时间】：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) {
    ...

【问题讨论】：

标签： flutter listview future

【解决方案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 参数（高像素）

【讨论】：