Flutter中的向上滑动视图

Question

我正在尝试制作类似于Google / Apple Maps屏幕的东西。我刚刚开始在Flutter中进行实验，很难理解“可拖动小部件”。有人可以给我示例代码，让我学习他们如何制作其上推视图。我找不到。

Answer 1

There's also the sliding_up_panel Flutter library you could use to implement the same sort of design that Google/Apple Maps uses.

Answer 2

Draggable(和DragTarget) 不用于您所说的slide-up view

slide-up view，来自 android 世界，用于底部对齐的模态。 Draggable是使用拖放传输数据。

在颤振中，底部模态相当简单：

首先，确保您在树的上方某处有 a Scaffold。因为它将把所有东西放在一起。

然后，使用您喜欢的任何内容调用showBottomSheet或showModalBottomSheet。内容现在将自动出现在屏幕底部。

就是这样，你的工作完成了！您现在可以选择添加自定义关闭事件。为此，您只需调用Navigator.pop(context). 但是模态和非模态底片都可以使用常见的手势开箱即用。如后退按钮、导航栏后退、点击外。

完整示例：

class MyExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(title: new Text('Example')),
        body: new Center(
          child: new Builder(builder: (context) {
            return new Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                new RaisedButton(
                  onPressed: () => modal(context),
                  child: new Text("modal"),
                ),
                new RaisedButton(
                  onPressed: () => showSlideupView(context),
                  child: new Text("non modal"),
                ),
              ],
            );
          }),
        ),
      ),
    );
  }

  void showSlideupView(BuildContext context) {
    showBottomSheet(
        context: context,
        builder: (context) {
          return new Container(
            child: new GestureDetector(
              onTap: () => Navigator.pop(context),
              child: new Text("Click me to close this non-modal bottom sheet"),
            ),
          );
        });
  }

  modal(BuildContext context) {
    showModalBottomSheet(
        context: context,
        builder: (context) {
          return new Container(
            child: new Text("This is a modal bottom sheet !"),
          );
        });
  }
}