Flutter中的滑动视图

Question

我正在尝试在Flutter中制作类似于谷歌/苹果地图屏幕的东西。我刚开始在Flutter中进行实验，但是我很难理解“Draggable widget”。有人可以给我一个示例代码，展示如何创建滑动视图，让我学习一下吗？我找不到任何相关的示例。

- Stroi

---

我发现了这个https://www.youtube.com/watch?v=AjAQglJKcb4 视频，它使用https://api.flutter.dev/flutter/material/showModalBottomSheet.html，你不需要插件。 - user3808307

Answer 1

此外，您还可以使用sliding_up_panel Flutter库来实现与Google/Apple Maps相同类型的设计。

- Akshath Jain

---

能否在某些事件发生时隐藏折叠小部件并显示它？ - Farshid Zaker

现在是可以的。它有各种属性，您可以使用setState()进行操作。 - Sam

Answer 2

Draggable（和DragTarget）不适用于您所称的slide-up view。

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

在Flutter中，底部模态框非常简单：

首先，请确保您的树上方有一个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 !"),
          );
        });
  }
}

- Rémi Rousselet

---

谢谢，你的例子很棒！现在如果我想扩展底部视图，比如当你在地图上点击标记时，底部视图弹出，然后你可以通过向上滑动来扩展它。这就是为什么“draggable”让我感到困惑。我需要为此制作可拖动的吗？ - Stroi

不使用draggable进行拖动操作，您可以改用GestureDetector和onVerticalDrag。 - Rémi Rousselet

Answer 3

现在你可以使用Sliding Up Panel插件来实现这个功能，它非常棒。

- AnasSafi

Answer 4

作为一种替代方案：从文档中https://api.flutter.dev/flutter/material/showModalBottomSheet.html。

Widget build(BuildContext context) {
  return Center(
    child: ElevatedButton(
      child: const Text('showModalBottomSheet'),
      onPressed: () {
        showModalBottomSheet<void>(
          context: context,
          builder: (BuildContext context) {
            return Container(
              height: 200,
              color: Colors.amber,
              child: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    const Text('Modal BottomSheet'),
                    ElevatedButton(
                      child: const Text('Close BottomSheet'),
                      onPressed: () => Navigator.pop(context),
                    )
                  ],
                ),
              ),
            );
          },
        );
      },
    ),
  );
}

- user3808307