从固定底部开始，然后使其可拖动颤动

Question

我想首先显示一个固定大小的模态底部表单。 然后，用户可以将其向上拖动到某个点，然后向下拖动到固定大小或使其消失，就像您在 Google 地图应用程序或 Spotify 应用程序中看到的那样。

有一个 flutter 包吗？

showModalBottomSheet<void>(
    context: _scaffoldKey.currentContext!,
    builder: (BuildContext context) {
      return MyBottomSheetComponent(radar: radar);
    },
    clipBehavior: Clip.hardEdge,
    enableDrag: true,
    isScrollControlled: true,
    useSafeArea: true);
}

Answer 1

是的，您可以通过一些自定义逻辑来实现这一点。让我们考虑下面的代码：

showModalBottomSheet<void>(
  context: context,
  builder: (BuildContext context) {
    return DraggableScrollableSheet(
      initialChildSize: 0.5,
      minChildSize: 0.1, 
      maxChildSize: 0.9,
      expand: false,
      builder: (BuildContext context, ScrollController scrollController) {
        return Container(
          color: Colors.white,
          child: ListView.builder(
            controller: scrollController,
            itemCount: 25,
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                title: Text('Item $index'),
              );
            },
          ),
        );
      },
    );
  },
);

您可以使用 DraggableScrollableSheet 小部件创建一个可由用户上下拖动的底部工作表。您可以设置一些参数，例如：initialChildSize、minChildSize 和 maxChildSize。

此处的 expand 参数决定向上拖动时工作表是否应扩展至最大尺寸。如果设置为 true，则工作表将展开；如果设置为 false，工作表将保持最大尺寸，直到被关闭。