最近我在Flutter中遇到了一种奇怪的行为，无法解释。考虑以下代码在WEB平台上构建：
无论是在移动设备上还是在桌面浏览器上打开，
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Hello World',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatelessWidget {
final String title;
const MyHomePage({this.title = "Home Page"});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: const Center(
child: Text(
'Hello, World!',
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (_) => DraggableScrollableSheet(
expand: false,
builder: (_, ScrollController scrollController) {
return ListView(
controller: scrollController,
children: [for (var i = 0; i < 250; i++) Text("Item: $i")],
);
},
),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(20))),
),
tooltip: "Open Sheet!",
child: const Icon(Icons.add),
),
);
}
}
无论是在移动设备上还是在桌面浏览器上打开，
DraggableScrollableSheet都会正常显示并占据屏幕高度的50％。在移动设备上，您可以通过拖动滚动该表单来查看其中的ListView，并且它可能会占据0％到100％的屏幕。然而，在桌面浏览器中，当使用鼠标滚轮旋转时，DraggableScrollableSheet无法与ListView一起滚动。它将保持在50％，并且只能关闭而不能展开！我是否遗漏了什么？这是Flutter的错误吗？如何使其在桌面浏览器中按预期工作？附：这是我的应用程序行为的稍微复杂一些的示例，托管在GitHub页面上；要打开ModalBottomSheet，请点击位于圣彼得堡中心的Flutter图标。