Flutter中的向上滑动视图 [英] Slide-up view in Flutter

问题描述

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

解决方案

I'm trying to make something similar to google/apple maps screen in flutter. I just started experimenting in Flutter and I have a hard time understand that "Draggable widget". Could someone give me example code how they made their slide-up view, I can learn from? I can't find any.

解决方案

Draggable (and DragTarget) is not used for what you call slide-up view

slide-up view, from the android world, is for bottom aligned modals. Draggable is to transfer data using Drag&Drop.

In flutter, bottom modals are fairly simple :

First, make sure you have somewhere above in your tree a Scaffold. As it's what will position everything together.

Then, call either showBottomSheet or showModalBottomSheet with whatever content you like. The content will now automatically appear at the bottom of your screen.

That's it, your job is done ! You can optionally now add a custom close event. For this, you'll just have to call Navigator.pop(context). But both modal and non-modal bottom sheet can be closed out of the box using common gestures. Such as back button, navbar back, of click outside.

Full example :

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

这篇关于Flutter中的向上滑动视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！