Flutter 中的向上滑动视图

Question

我正在尝试在 flutter 中制作类似于 google/apple 地图屏幕的内容。我刚开始在 Flutter 中进行实验，我很难理解 "Draggable widget"。有人可以给我示例代码，他们是如何制作上滑视图的，我可以从中学习吗？我找不到。

Answer 1

Draggable (and DragTarget) 不用于你所说的slide-up view

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

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

首先，确保你的树的上方有一个Scaffold。因为它将所有东西放在一起。

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

就是这样，你的工作完成了！您现在可以选择添加自定义关闭事件。为此，您只需调用 Navigator.pop(context)。但是 modal 和 non-modal bottom sheet 都可以使用普通手势开箱即用。比如后退按钮，导航栏后退，点击外面。

完整示例：

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 !"),
          );
        });
  }
}

Answer 2

还有 sliding_up_panel Flutter 库，您可以使用它来实现 Google/Apple 地图使用的相同类型的设计。

Answer 3

现在您可以使用 Sliding Up Panel 插件来做到这一点，太棒了。

Answer 4

添加此插件并根据需要使用它:- SlidingUpPanel

导入的建议：- 一个可拖动的 Flutter 小部件，使实现 SlidingUpPanel 变得更加容易

Answer 5

作为替代方案：来自文档 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),
                    )
                  ],
                ),
              ),
            );
          },
        );
      },
    ),
  );
}

Flutter 中的向上滑动视图

Slide-up view in Flutter

mobile

view

slideup

dart

flutter