Flutter 中的上滑视图

Posted 2023-02-23

【中文标题】Flutter 中的上滑视图

【英文标题】：Slide-up view in Flutter

【发布时间】：2018-08-16 00:38:18

【问题描述】：

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

【问题讨论】：

我发现这个youtube.com/watch?v=AjAQglJKcb4 视频使用了api.flutter.dev/flutter/material/showModalBottomSheet.html 而你不需要插件

【参考方案1】：

您还可以使用 sliding_up_panel Flutter 库来实现与 Google/Apple 地图相同的设计。

【讨论】：

是否可以隐藏折叠的小部件并在某些事件时显示它？

现在有可能是的。它具有您可以使用 setState() 操作的各种属性

【参考方案2】：

Draggable（和DragTarget）不用于你所说的slide-up view

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

在颤振中，底部模式相当简单：

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

【讨论】：

谢谢，你的例子很棒！现在，如果我想在您单击地图上的标记并弹出底部视图时展开底部视图（例如谷歌地图），那么您可以通过向上滑动来展开它。这就是为什么“可拖动”让我感到困惑。我需要为此设置可拖动的吗？

No draggable 不用于拖动动作。您可以改用GestureDetector 和onVerticalDrag。

【参考方案3】：

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

【参考方案4】：

添加此插件并随心所欲地使用它：- SlidingUpPanel

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

【参考方案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),
                    )
                  ],
                ),
              ),
            );
          ,
        );
      ,
    ),
  );