部分可见底部 sheet - 抖动

Question

是否有可能在 flutter 中让底部 sheet 在初始状态下部分可见，然后能够 expand/dismiss？

我附上了 Google 地图实现的示例的屏幕截图。

Answer 1

我将在接下来的几周内实施相同的行为，我将参考 Flutter Gallery 中的背景实施，我之前能够将其修改为滑动以显示和隐藏（带有窥视区域）。

准确地说，您可以通过更改 Flutter Gallery backdrop_demo.dart 中的这行代码来复制所需的效果：

 void _handleDragUpdate(DragUpdateDetails details) {
    if (_controller.isAnimating)// || _controller.status == AnimationStatus.completed)
      return;

    _controller.value -= details.primaryDelta / (_backdropHeight ?? details.primaryDelta);
 }

我刚刚评论了控制器状态检查以允许面板滑动。

我知道这不是您正在寻找的完整实现，但我希望这对您有所帮助。

Answer 2

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

这是 gist for the entire page in this^ GIF, or try the 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中：
- Google 地图是最下层。
- Header（搜索字段 + 水平滚动条）位于地图上方。
- DraggableBottomSheet 在 Header.

之上

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;

编辑：感谢 @Alejandro 指出小部件名称中的拼写错误 :)

部分可见底部 sheet - 抖动

Partially viewable bottom sheet - flutter

dart

modal-dialog

flutter

bottom-sheet