Flutter：交互、手势和动画

转载自：https://mp.weixin.qq.com/s/653zL1YvuMwysKu907EQ-g

手势处理

按钮点击

为了获取按钮的点击事件，只需要设置 onPressed 参数就可以了：

class TestWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text('click'),
      onPressed: () => debugPrint('clicked'),
    );
  }
}

任意控件的手势事件

跟 button 不同，大多数的控件没有手势事件监听函数可以设置，为了监听这些控件上的手势事件，我们需要使用另一个控件——GestureDetector（没错，它也是一个控件）：

class TestWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Text('text'),
      onTap: () => debugPrint('clicked'),
    );
  }
}

除了上面代码使用到的 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);

下面是完整的例子：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter navigation',
      home: FirstScreen(),
    );
  }
}

class FirstScreen extends StatefulWidget {
  @override
  State createState() {
    return _FirstScreenState();
  }
}
class _FirstScreenState extends State<FirstScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Navigation deme'),),
      body: Center(
        child: RaisedButton(
          child: Text('First screen'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (_) => SecondScreen())
            );
          }
        ),
      ),
    );
  }
}

class SecondScreen extends StatefulWidget {
  @override
  State createState() {
    return _SecondScreenState();
  }
}
class _SecondScreenState extends State<SecondScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Navigation deme'),),
      body: Center(
        child: RaisedButton(
            child: Text('Second screen'),
            onPressed: () {
              Navigator.pop(context);
            }
        ),
      ),
    );
  }
}

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

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

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

onPressed: () async {
  // Navigator.push 会返回一个 Future<T>，如果你对这里使用的 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 客户端

消息输入页

这一节我们来实现一个用户输入的页面。UI 很简单，就是一个文本框和一个按钮。

class MessageForm extends StatefulWidget {
  @override
  State createState() {
    return _MessageFormState();
  }
}

class _MessageFormState extends State<MessageForm> {
  final editController = TextEditingController();

  // 对象被从 widget 树里永久移除的时候调用 dispose 方法（可以理解为对象要销毁了）
  // 这里我们需要主动再调用 editController.dispose() 以释放资源
  @override
  void dispose() {
    super.dispose();
    editController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(16.0),
      child: Row(
        children: <Widget>[
          // 我们让输入框占满一行里除按钮外的所有空间
          Expanded(
            child: Container(
              margin: EdgeInsets.only(right: 8.0),
              child: TextField(
                decoration: InputDecoration(
                  hintText: 'Input message',
                  contentPadding: EdgeInsets.all(0.0),
                ),
                style: TextStyle(
                  fontSize: 22.0,
                  color: Colors.black54
                ),
                controller: editController,
                // 自动获取焦点。这样在页面打开时就会自动弹出输入法
                autofocus: true,
              ),
            ),
          ),
          InkWell(
            onTap: () => debugPrint('send: ${editController.text}'),
            onDoubleTap: () => debugPrint('double tapped'),
            onLongPress: () => debugPrint('long pressed'),
            child: Container(
              padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 16.0),
              decoration: BoxDecoration(
                color: Colors.black12,
                borderRadius: BorderRadius.circular(5.0)
              ),
              child: Text('Send'),
            ),
          )
        ],
      ),
    );
  }
}


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter UX demo',
      home: AddMessageScreen(),
    );
  }
}

class AddMessageScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Add message'),
      ),
      body: MessageForm(),
    );
  }
}

这里的按钮本应该使用 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: $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

class MessageList extends StatefulWidget {

  // 先忽略这里的参数 key，后面我们就会看到他的作用了
  MessageList({Key key}): super(key: key);

  @override
  State createState() {
    return _MessageListState();
  }
}

class _MessageListState extends State<MessageList> {
  final List<Message> messages = [];

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: messages.length,
      itemBuilder: (context, index) {
        final msg = messages[index];
        final subtitle = DateTime.fromMillisecondsSinceEpoch(msg.timestamp)
            .toLocal().toIso8601String();
        return ListTile(
          title: Text(msg.msg),
          subtitle: Text(subtitle),
        );
      }
    );
  }

  void addMessage(Message msg) {
    setState(() {
      messages.add(msg);
    });
  }
}

这段代码里唯一的新知识就是给 MessageList 的 key 参数，我们下面先看看如何使用他，然后再说明它的作用：

class MessageListScreen extends StatelessWidget {

  final messageListKey = GlobalKey<_MessageListState>(debugLabel: 'messageListKey');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Echo client'),
      ),
      body: MessageList(key: messageListKey),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          final result = await Navigator.push(
              context,
              MaterialPageRoute(builder: (_) => AddMessageScreen())
          );
          debugPrint('result = $result');
          if (result is Message) {
            messageListKey.currentState.addMessage(result);
          }
        },
        tooltip: 'Add message',
        child: Icon(Icons.add),
      )
    );
  }
}

引入一个 GlobalKey 的原因在于，MessageListScreen 需要把从 AddMessageScreen 返回的数据放到 _MessageListState 中，而我们无法从 MessageList 拿到这个 state。

GlobalKey 的是应用全局唯一的 key，把这个 key 设置给 MessageList 后，我们就能够通过这个 key 拿到对应的 statefulWidget 的 state。