Flutter：DraggableScrollableSheet 出现时覆盖整个屏幕答案

【问题标题】：Flutter: DraggableScrollableSheet covers the whole screen when it appearsFlutter：DraggableScrollableSheet 出现时覆盖整个屏幕
【发布时间】：2020-03-15 16:08:37
【问题描述】：

点击时，我执行以下功能，该功能应使底部工作表以通常的方式出现（从底部向上滚动）：

showModalBottomSheet(
      context: context,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(30.0),
      ),
      isScrollControlled: true,
      isDismissible: true,
      backgroundColor: Colors.white,
      builder: (context) => ChooseTimeDialog(),
    );

应该出现的底部工作表应该是可滚动的。它的代码如下：

class ChooseTimeDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DraggableScrollableSheet(
      initialChildSize: 0.4,
      minChildSize: 0.2,
      maxChildSize: 0.6,
      builder: (context, scrollController) {
        return SingleChildScrollView(
          controller: scrollController,
          child: Container(
            color: Colors.blue,
            height: 300,
            width: 200,
          ),
        );
      },
    );
  }
}

这是点击时出现的结果：

为什么会覆盖整个屏幕？

【问题讨论】：

标签： flutter modal-dialog draggable bottom-sheet

【解决方案1】：

将isScrollControlled 设置为true 的showModalBottomSheet() 并将expand 设置为false 的DraggableScrollableSheet()。

showModalBottomSheet(
   context: context,
   isScrollControlled: true,
   ....
   builder: (context) => ChooseTimeDialog(),
);

class ChooseTimeDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DraggableScrollableSheet(
      expand: false,
      ....
    );
  }
}

【讨论】：

这帮助我达到了预期的结果，谢谢！我没有注意到“扩展”属性，这给我带来了很多麻烦

【解决方案2】：

当 isScrollControlled 设置为“True”时，bottomModal 允许占据视图的高度。将其设置为“False”会改变这一点。

我使用您的代码创建了这个 dartpad，但删除了 build 方法的小部件类 https://dartpad.dev/5850ec2b79564bb28f361eeed2b383ec

如果您想将模式表的代码与调用函数分开，您应该使用变量，而不是新类。

这是上面 dartpad 文件中包含的代码：

class MyFloatingActionButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      onPressed: () {
        showModalBottomSheet(
          shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(30.0),
                ),
          isScrollControlled: false,
          isDismissible: true,
          backgroundColor: Colors.white,
          context: context,

          builder: (context) => DraggableScrollableSheet(
            initialChildSize: 0.4,
            minChildSize: 0.2,
            maxChildSize: 0.6,
            builder: (context, scrollController) {
              return SingleChildScrollView(
                controller: scrollController,
                child: Container(
                  color: Colors.blue,
                  height: 300,
                  width: 200,
                ),
              );
            },
          ),
        );
      },
    );
  }
}

【讨论】：

执行此代码会给我一张覆盖一半屏幕的表格。蓝色容器未占用的空间是白色的。有没有办法让床单尺寸调整到其孩子的尺寸？我不明白为什么在将功能提取到另一个小部件（ChooseTimeDialog）时有另一个 Buildcontext 是一件坏事。我是否正确理解将小部件分配给变量更好？
我更新了我的飞镖板，因为我意识到我发布的那个很糟糕。我将用它来进一步讨论。（这里是：dartpad.dev/5850ec2b79564bb28f361eeed2b383ec）
你想让蓝表占据bottomModal的全部空间吗？双重上下文是我对为什么 bottomModal 占用所有空间的最佳猜测，因为它会假设整个画布都是可用的。这根本不是一件坏事，通常..创建另一个小部件，但在这种情况下，showBottomModalSheet 是一个函数，因此需要调用它。使用变量不一定更好，如果您想将代码分开，我只是推荐它。
谢谢... dartpad 显示了我在上一条评论中描述的问题。
我不明白您看到的问题。请您再解释一下好吗？

【解决方案3】：

我也有这个问题，这个包非常擅长解决与问题相关的问题（至少在我的用例中）：

https://pub.dev/packages/sliding_sheet

特别是包“As a BottomSheetDialog”的这一部分

【讨论】：