pse*_*sys 7 scroll flutter flutter-web flutter-showmodalbottomsheet
我最近在 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),
),
);
}
}
Run Code Online (Sandbox Code Playgroud)
从移动设备打开时,它工作得非常好,并且符合预期:DraggableScrollableSheet打开后,占据屏幕高度的 50%,然后ListView它的内部可能会与工作表本身一起滚动,因此它将占据屏幕高度的 0% 到 100%。屏幕。
但是,如果在桌面浏览器中打开,则拒绝与鼠标滚轮旋转DraggableScrollableSheet一起滚动。ListView只是停留在50%,只能关闭,永远不能扩容!
我错过了什么吗?这是一个颤振错误吗?如何使其在桌面浏览器中按预期工作?
PS 这里是我的应用程序中行为的一个稍微复杂的示例,托管在 GitHub 页面上;要ModalBottomSheet打开它,您应该触摸圣彼得堡中心的 Flutter 图标。
小智 0
这可能是一个错误,您可以使用以下参数(“Expand”旁边)解决此问题:“initialChildSize: 1.0” 这会将初始大小设置为 100% DraggableScrollableSheet 参数