Flutter学习指南：交互、手势和动画

这里要说明的是，onVerticalXXX/onHorizontalXXX 和 onPanXXX 不能同时设置。如果同时需要水平、竖直方向的移动，使用 onPanXXX。

如果读者希望在用户点击的时候能够有个水波纹效果，可以使用 InkWell，它的用法跟 GestureDetector 类似，只是少了拖动相关的手势（毕竟，这个水波纹效果只有在点击的时候才有意义）。

原始手势事件监听

GestureDetector 在绝大部分时候都能够满足我们的需求，如果真的满足不了，我们还可以使用最原始的 Listener 控件。

class TestWidget extends StatelessWidget {  
@override  
Widget build(BuildContext context) {    
return Listener(      
child: Text(‘text’),      
onPointerDown: (event) => print(‘onPointerDown’),      
onPointerUp: (event) => print(‘onPointerUp’),      
onPointerMove: (event) => print(‘onPointerMove’),      
onPointerCancel: (event) => print(‘onPointerCancel’),    
);  
}
}

在页面间跳转

Flutter 里所有的东西都是 widget，所以，一个页面，也是 widget。为了调整到新的页面，我们可以 push 一个 route 到 Navigator 管理的栈中。

Navigator.push(  
context,  
MaterialPageRoute(builder: (_) => SecondScreen())
);

需要返回的话，pop 掉就可以了：

Navigator.pop(context);

下面是完整的例子：

除了打开一个页面，Flutter 也支持从页面返回数据：

Navigator.pop(context, ‘message from second screen’);

由于打开页面是异步的，页面的结果通过一个 Future 来返回：

onPressed: () async {  
// Navigator.push 会返回一个 Future，如果你对这里使用的 await不太熟悉，可以参考  
// https://www.dartlang.org/guides/language/language-tour#asynchrony-support  
var msg = await Navigator.push(    
context,    
MaterialPageRoute(builder: (_) => SecondScreen())  
);  
debugPrint(‘msg = $msg’);}

我们还可以在 MaterialApp 里设置好每个 route 对应的页面，然后使用 Navigator.pushNamed(context, routeName) 来打开它们：

MaterialApp(  
// 从名字叫做 ‘/’ 的 route 开始（也就是 home）  
initialRoute: ‘/’,  
routes: {    
‘/’: (context) => HomeScreen(),    
‘/about’: (context) => AboutScreen(),  
},
);

接下来，我们通过