我正在尝试在Flutter中制作类似于谷歌/苹果地图屏幕的东西。我刚开始在Flutter中进行实验,但是我很难理解“Draggable widget”。有人可以给我一个示例代码,展示如何创建滑动视图,让我学习一下吗?我找不到任何相关的示例。
我正在尝试在Flutter中制作类似于谷歌/苹果地图屏幕的东西。我刚开始在Flutter中进行实验,但是我很难理解“Draggable widget”。有人可以给我一个示例代码,展示如何创建滑动视图,让我学习一下吗?我找不到任何相关的示例。
此外,您还可以使用sliding_up_panel Flutter库来实现与Google/Apple Maps相同类型的设计。
Draggable
(和DragTarget
)不适用于您所称的slide-up view
。
slide-up view
是来自Android世界的底部对齐模态框。
Draggable
用于使用拖放传输数据。
在Flutter中,底部模态框非常简单:
首先,请确保您的树上方有一个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 !"),
);
});
}
}
draggable
进行拖动操作,您可以改用GestureDetector
和onVerticalDrag
。 - Rémi RousseletWidget 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),
)
],
),
),
);
},
);
},
),
);
}