除了上面代码使用到的 onTap,GestureDetector 还支持许多其他事件:
-
onTapDown:按下
-
onTap:点击动作
-
onTapUp:抬起
-
onTapCancel:前面触发了 onTapDown,但并没有完成一个 onTap 动作
-
onDoubleTap:双击
-
onLongPress:长按
-
onScaleStart, onScaleUpdate, onScaleEnd:缩放
-
onVerticalDragDown, onVerticalDragStart, onVerticalDragUpdate, onVerticalDragEnd, onVerticalDragCancel, onVerticalDragUpdate:在竖直方向上移动
-
onHorizontalDragDown, onHorizontalDragStart, onHorizontalDragUpdate, onHorizontalDragEnd, onHorizontalDragCancel, onHorizontalDragUpdate:在水平方向上移动
-
onPanDown, onPanStart, onPanUpdate, onPanEnd, onPanCancel:拖曳(水平、竖直方向上移动)
如果同时设置了 onVerticalXXX 和 onHorizontalXXX,在一个手势里,只有一个会触发(如果用户首先在水平方向移动,则整个过程只触发 onHorizontalUpdate;竖直方向的类似)
这里要说明的是,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(),
},
);
接下来,我们通过实现一个 echo 客户端的前端页面来综合运用前面所学的知识(逻辑部分我们留到下一篇文章再补充)。
echo 客户端
消息输入页
这一节我们来实现一个用户输入的页面。UI 很简单,就是一个文本框和一个按钮。
这里的按钮本应该使用 RaisedButton 或 FlatButton。为了演示如何监听手势事件,我们这里故意自己用 Container 做了一个按钮,然后通过 InkWell 监听手势事件。InkWell 除了上面展示的几个事件外,还带有一个水波纹效果。如果不需要这个水波纹效果,读者也可以使用 GestureDetector。
消息列表页面
我们的 echo 客户端共有两个页面,一个用于展示所有的消息,另一个页面用户输入消息,后者在上一小节我们已经写好了。下面,我们来实现用于展示消息的页面。
页面间跳转
我们的页面包含一个列表和一个按钮,列表用于展示信息,按钮则用来打开上一节我们所实现的 AddMessageScreen。这里我们先添加一个按钮并实现页面间的跳转。
// 这是我们的消息展示页面class MessageListScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘Echo client’),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
// push 一个新的 route 到 Navigator 管理的栈中,以此来打开一个页面
Navigator.push(
context,
MaterialPageRoute(builder: (_) => AddMessageScreen())
);
},
tooltip: ‘Add message’,
child: Icon(Icons.add),
)
);
}
}
在消息的输入页面,我们点击 Send 按钮后就返回:
onTap: () {
debugPrint(‘send: ${editController.text}’);
Navigator.pop(context);
}
最后,我们加入一些骨架代码,实现一个完整的应用:
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘Flutter UX demo’,
home: MessageListScreen(),
);
}
}
但是,上面代码所提供的功能还不够,我们需要从 AddMessageScreen 中返回一个消息。
首先我们对数据建模:
class Message {
final String msg;
final int timestamp;
Message(this.msg, this.timestamp);
@override
String toString() {
return ‘Message{msg:
m
s
g
,
t
i
m
e
s
t
a
m
p
:
msg, timestamp:
msg, timestamp: timestamp}’;
}
}
下面是返回数据和接收数据的代码:
onTap: () {
debugPrint(‘send: ${editController.text}’);
final msg = Message(
editController.text,
DateTime.now().millisecondsSinceEpoch
);
Navigator.pop(context, msg);
},
floatingActionButton: FloatingActionButton(
onPressed: () async {
final result = await Navigator.push(
context,
MaterialPageRoute(builder: (_) => AddMessageScreen())
);
debugPrint(‘result = $result’); }, // …)
把数据展示到 ListView
这段代码里唯一的新知识就是给 MessageList 的 key 参数,我们下面先看看如何使用他,然后再说明它的作用:
引入一个 GlobalKey 的原因在于,MessageListScreen 需要把从 AddMessageScreen 返回的数据放到 _MessageListState 中,而我们无法从 MessageList 拿到这个 state。
GlobalKey 的是应用全局唯一的 key,把这个 key 设置给 MessageList 后,我们就能够通过这个 key 拿到对应的 statefulWidget 的 state。
现在,整体的效果是这个样子的:
如果你遇到了麻烦,在 Github 上找到所有的代码:
git clone https://github.com/Jekton/flutter_demo.git
cd flutter_demo
git checkout ux-basic
动画
Flutter 动画的核心是 Animation,Animation 接受一个时钟信号(vsync),转换为 T 值输出。它控制着动画的进度和状态,但不参与图像的绘制。最基本的 Animation 是 AnimationController,它输出 [0, 1] 之间的值。
使用内置的 Widget 完成动画
为了使用动画,我们可以用 Flutter 提供的 AnimatedContainer、FadeTransition、ScaleTransition 和 RotationTransition 等 Widget 来完成。
下面我们就来演示如何使用 ScaleTransition:
AnimationController 的输出是线性的。非线性的效果可以使用 CurveAnimation 来实现:
当然,我们还可以组合不同的动画:
class _AnimWidgetState extends State
with SingleTickerProviderStateMixin { // …
@override
Widget build(BuildContext context) {
var scaled = ScaleTransition(
child: FlutterLogo(size: 200.0),
scale: curve,
);
return FadeTransition(
child: scaled,
opacity: curve,
);
}
}
更多的动画控件,读者可以参考 https://flutter.io/widgets/animation/。
自定义动画效果
上一节我们使用 Flutter 内置的 Widget 来实现动画。他们虽然能够完成日常开发的大部分需求,但总有一些时候不太适用。这时我们就得自己实现动画效果了。
前面我们说,AnimationController 的输出在 [0, 1] 之间,这往往对我们需要实现的动画效果不太方便。为了将数值从 [0, 1] 映射到目标空间,可以使用 Tween:
animationValue = Tween(begin: 0.0, end: 200.0).animate(controller) // 每一帧都会触发 listener 回调
…addListener(() {
// animationValue.value 随着动画的进行不断地变化。我们利用这个值来实现
// 动画效果
print(‘value = ${animationValue.value}’);
});
下面我们来画一个小圆点,让它往复不断地在正弦曲线上运动。
先来实现小圆点沿着曲线运动的效果:
上面的动画中,我们只是对位置做出了改变,下面我们将在位置变化的同时,也让小圆点从红到蓝进行颜色的变化。
class _AnimationState extends State
with SingleTickerProviderStateMixin {
// …
Animation color;
void _initState() {
// …
最后
小编这些年深知大多数初中级Android工程师,想要提升自己,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此我收集整理了一份《2024年Android移动开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友。
由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频,并且后续会持续更新
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人
都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
如果你需要这些资料, ⬅ 专栏获取
[外链图片转存中…(img-gIjbPZQr-1719185172055)]
[外链图片转存中…(img-cyJ65xRK-1719185172056)]
[外链图片转存中…(img-JNzFXRDe-1719185172056)]
由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频,并且后续会持续更新
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人
都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
如果你需要这些资料, ⬅ 专栏获取