Question

我正在努力制作类似于谷歌/苹果地图屏幕的东西。我刚刚开始在Flutter进行实验，我很难理解“可拖动的小部件”。有人可以给我示例代码如何制作他们的幻灯片视图，我可以从中学习吗？我找不到任何。

Answer 1

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

Answer 2

Draggable（和DragTarget）不用于您所谓的slide-up view

来自android世界的

slide-up view用于底部对齐模态。 Draggable是使用Drag＆amp; Drop。传输数据。

在颤动中，底部模态非常简单：

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

Answer 3

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

Answer 4

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

导入的建议：-：可拖动的Flutter小部件，使实施SlidingUpPanel更加容易

Flutter中的向上滑动视图

4 个答案: