Flutter 桌面网页 DraggableScrollableSheet 滚动问题答案

【问题标题】：Flutter desktop web DraggableScrollableSheet scrolling problemFlutter 桌面网页 DraggableScrollableSheet 滚动问题
【发布时间】：2022-03-22 20:29:12
【问题描述】：

我最近在 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 可以与 Sheet 本身一起滚动，所以它会占据屏幕的 0% 到 100%。
但是，如果在桌面浏览器中打开，DraggableScrollableSheet 只是拒绝与ListView 一起滚动鼠标滚轮。它只停留在 50% 上，只能关闭，永远不能扩展！
我错过了什么？它是一个颤振错误吗？如何使其在桌面浏览器中按预期工作？

附：这是我的应用程序中的行为slightly more complex example，托管在 GitHub 页面上；要打开ModalBottomSheet，您应该触摸圣彼得堡中心的 Flutter 图标。

【问题讨论】：

标签： flutter scroll flutter-web flutter-showmodalbottomsheet

【解决方案1】：

这可能是一个错误，您可以使用以下参数（“Expand”旁边）解决此问题：“initialChildSize: 1.0” 这会将初始大小设置为 100% DraggableScrollableSheet parameters

【讨论】：

是的，谢谢，我已经找到了。然而，我最初的意图是将初始大小设置为小于 100%，并为用户提供将其扩展至 100% 或折叠它的能力。