最近我在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图标。