从底部开始固定，然后使其可拖曳Flutter

发布于02月17日

我想首先显示一个固定大小的模式底板. 然后，用户可以将它拖到某个点上，然后缩小到固定大小，或者让它消失，就像你在谷歌 map 应用程序或Spotify应用程序中看到的那样.

有没有专门的Flutter 翼套餐.

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

推荐答案

是的，您可以通过一些定制逻辑来实现这一点.让我们考虑一下下面的代码:

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，则工作表将保持最大大小，直到被解除.