如何使用 Flutter 构建一个能够拖动到全屏的底部工作表小部件？

Posted 2023-02-23

【中文标题】如何使用 Flutter 构建一个能够拖动到全屏的底部工作表小部件？

【英文标题】：How to use Flutter to build a bottom sheet widget which is able to drag up to full screen?

【发布时间】：2019-04-22 02:30:51

【问题描述】：

我想构建一个能够拖动到全屏的底部工作表小部件。

谁能告诉我怎么做？

谷歌地图有一个小部件可以做到这一点。这是屏幕截图（查看附件图片）：

向上拖动之前：

拖动后：

【问题讨论】：

你有解决办法吗

【参考方案1】：

将DraggableBottomSheet 小部件与Stack 小部件一起使用：

这是此^ GIF 中整个页面的gist，或尝试Codepen。

整个页面的结构如下：

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: Stack(
        children: <Widget>[
          CustomGoogleMap(),
          CustomHeader(),
          DraggableScrollableSheet(
            initialChildSize: 0.30,
            minChildSize: 0.15,
            builder: (BuildContext context, ScrollController scrollController) 
              return SingleChildScrollView(
                controller: scrollController,
                child: CustomScrollViewContent(),
              );
            ,
          ),
        ],
      ),
    );
  

在Stack： - 谷歌地图是最低层。 - 标题（搜索字段 + 水平滚动条）位于地图上方。 - DraggableBottomSheet 位于标题上方。

draggable_scrollable_sheet.dart中定义的一些有用参数：

  /// The initial fractional value of the parent container's height to use when
  /// displaying the widget.
  ///
  /// The default value is `0.5`.
  final double initialChildSize;

  /// The minimum fractional value of the parent container's height to use when
  /// displaying the widget.
  ///
  /// The default value is `0.25`.
  final double minChildSize;

  /// The maximum fractional value of the parent container's height to use when
  /// displaying the widget.
  ///
  /// The default value is `1.0`.
  final double maxChildSize;

【讨论】：

您好，感谢您的解决方案。好奇如何让它进入带有脚手架和全部的“全屏”模式

【参考方案2】：

模式和持久的底页都不能拖到视图中。持久性底页必须被触发打开（例如，通过按下按钮）然后它可以被上下拖动直到最终消失。我希望有一个选项可以将其拖到视图中...

Rubber 应该满足你的需求；我试了一下，但当我调用 setstate 时它总是吓坏了（所以不适合我）......如果你有同样的问题，请告诉我。