首页 文章

Flutter中的向上滑动视图

提问于
浏览
2

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

1 回答

  • 2

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

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

    在颤动中,底部模态非常简单:

    首先,确保你的树上面有一个 Scaffold . 因为它将把所有东西放在一起 .

    然后,使用您喜欢的任何内容调用 showBottomSheetshowModalBottomSheet . 内容现在将自动显示在屏幕底部 .

    那个's it, your job is done ! You can optionally now add a custom close event. For this, you' ll只需要调用 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 !"),
              );
            });
      }
    }
    

    enter image description here

    enter image description here

相关问题