使用 ScrollController + FutureBuilder + Provider + ListView.builder 时出现奇怪的滚动行为答案

【问题标题】：Weird scrolling behaviour when use ScrollController + FutureBuilder + Provider + ListView.builder使用 ScrollController + FutureBuilder + Provider + ListView.builder 时出现奇怪的滚动行为
【发布时间】：2022-08-10 01:58:51
【问题描述】：

我基于 Future Provider 创建了一个列表视图。它按预期工作。现在我想添加一个 ScrollController 来创建一个动画 FloatingActionButton，比如 Gmail \"Compose\" 按钮。我将控制器属性放在 listView.builder 上。

在这里我有奇怪的行为：我不能滚动。只要我向下或向上滚动列表视图正在重建，我不能执行任何滚动。这是我的代码：

  ScrollController _scrollController = ScrollController();
  bool isFAB = false;

  @override
  void initState() {
    _scrollController.addListener(() {
      if (_scrollController.offset > 50) {
        setState(() {
          isFAB = true;
        });
      } else {
        setState(() {
          isFAB = false;
        });
      }
    });

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(AppLocalizations.of(context)!.toolListTitle),
        ),
        body: FutureBuilder(
          future:
              Provider.of<MyTools>(context, listen: false).fetchAndSetTools(),
          builder: (ctx, snapshot) => snapshot.connectionState ==
                  ConnectionState.waiting
              ? const Center(
                  child: CircularProgressIndicator(),
                )
              : Consumer<MyTools>(
                  child: Center(
                    child: Text(AppLocalizations.of(context)!.noToolYet),
                  ),
                  builder: (ctx, myTools, ch) => myTools.items.isEmpty
                      ? Center(
                          child: Text(AppLocalizations.of(context)!.noToolYet),
                        )
                      : ListView.builder(
                          controller: _scrollController,
                          scrollDirection: Axis.vertical,
                          itemCount: myTools.items.length,
                          itemBuilder: (ctx, i) => ToolWidget(
                            id: myTools.items[i].id,
                            name: myTools.items[i].name,
                            createdAt: myTools.items[i].createdAt,
                            description: myTools.items[i].description,
                          ),
                        ),
                ),
        ),
        floatingActionButton: isFAB
            ? FloatingActionButton(
                onPressed: () =>
                    Navigator.of(context).pushNamed(AddToolScreen.routeName),
                child: Icon(
                  Icons.add_sharp,
                  color: Theme.of(context).primaryColor,
                ),
                backgroundColor: Colors.black,
              )
            : FloatingActionButton.extended(
                onPressed: () =>
                    Navigator.of(context).pushNamed(AddToolScreen.routeName),
                icon: Icon(
                  Icons.add_sharp,
                  color: Theme.of(context).primaryColor,
                ),
                backgroundColor: Colors.black,
                label: Text(
                  \"Add Tool\",
                  style: TextStyle(
                    color: Theme.of(context).primaryColor,
                  ),
                ),
              ));
  }
}

你能帮助我吗？谢谢

标签： flutter flutter-provider flutter-futurebuilder flutter-listview

【解决方案1】：

我觉得

setState(() {
          isFAB = true;
        });

在您的 _scrollController.addListener 函数中再次将滚动位置重置为顶部。

【讨论】：