使用ScrollController+FutureBuilder+Provider+ListView.builder时的



我创建了一个基于Future Provider的列表视图。它按预期工作。现在我想添加一个ScrollController来创建一个像Gmail一样的动画FloatingActionButton;撰写";按钮我在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,
),
),
));
}
}

你能帮我吗?感谢

我认为

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

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

相关内容

  • 没有找到相关文章

最新更新