如何在Flutter中的Modal Bottom Sheet中向列表视图生成器添加程序向下滚动

Question

我使用模式底部表单来显示用户面临的挑战列表。当用户点击一个图标时：底部的表格就会出现，列表就会构建起来。这一切都很好。

我正在使用主屏幕上的滚动控制器来获取另一个列表。当用户添加项目时，我调用_scrollDown((，这是我创建的一个方法，用于自动向下滚动(在主屏幕上(，效果很好。我希望在最下面的表格中也有同样的行为。问题是我不知道在哪里可以调用_scrollDown((方法。用户点击"；我的挑战"；，然后底页出现，列表构建。。。。那么它应该向下滚动。。。但我看不出在代码的哪里可以添加方法。。。

这是模式表代码：(手势检测器位于用于获取挑战列表的图标上(

GestureDetector(
onTap: () {
showModalBottomSheet<void>(
isScrollControlled: true,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.circular(20.0),
),
),
context: context,
builder: (BuildContext context) {
return Container(
height: MediaQuery.of(context).size.height - 80,
child: SingleChildScrollView(
padding: EdgeInsets.only(
bottom:
MediaQuery.of(context).viewInsets.bottom),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
alignment: Alignment.topRight,
child: IconButton(
icon: Icon(
Icons.cancel,
color: Colors.red[900],
size: uD.largeFont3,
),
onPressed: () {
Navigator.pop(context);
}),
),
Container(
alignment: Alignment.topCenter,
margin: const EdgeInsets.only(bottom: 20),
child: Text(
uD.selectedIoLanguage == Language.french
? 'Mes défis'.toUpperCase()
: 'My Challenges'.toUpperCase(),
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.indigo[900],
fontSize: uD.largeFont3,
),
),
),
Container(
decoration: BoxDecoration(
border: Border(
top: BorderSide(
color: Colors.orange[200]!,
width: 3,
)),
gradient: LinearGradient(
colors: [
Colors.orange[200]!,
Colors.orange[50]!,
Colors.orange[100]!,
Colors.orange[200]!
],
begin: Alignment.topLeft,
end: Alignment.bottomLeft,
stops: [0, 0.2, 0.5, 0.8])),
height:
MediaQuery.of(context).size.height - 163,
child: uD.defis.length > 0
? ListView.builder(
controller: _scrollController,
cacheExtent: 2000,
padding: const EdgeInsets.all(20),
itemCount: uD.defis.length,
itemBuilder: (context, index) {
return MyDefisCard(
index: index,
score: uD.defis[index].score,
date: uD.defis[index].date,
time: uD.defis[index].time,

Answer 1

将您的底层构建器结果移动到StatefulWidget中，假设它被称为BottomSheetContent

showModalBottomSheet<void>(
isScrollControlled: true,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.circular(20.0),
),
),
context: context,
builder: (BuildContext context) => BottomSheetContent(),
);

在新的小部件中，创建一个新的ScrollController(请注意，在您的代码中，您使用的是上一个路由中列表中的相同ScrollController(

class _BottomSheetContentState extends State<BottomSheetContent> {
ScrollController _scrollController = ScrollController();
@override
void initState() {
super.initState();
WidgetsBinding.instance!.addPostFrameCallback((_) {
// _scrollController.animateTo()
// same logic as in _scrollDown
});
}
@override
Widget build(BuildContext context) {
// return bottom sheet content 
}
}