Question

是否可以在初始状态下使底片部分可见，然后展开/展开？

我提供了Google Maps实现的示例的屏幕截图。

Answer 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中：
-Google地图是最底层。
-页眉（搜索字段+水平滚动的筹码）在地图上方。
-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;

Answer 2

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

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

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

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

我刚刚评论了控制器状态检查，以使面板可滑动。

我知道这不是您要查找的完整实现，但是我希望这对您有任何帮助。

部分可见的底片-颤振

2 个答案: