flutter系列之:移動(dòng)端手勢(shì)的具體使用


簡(jiǎn)介
之前我們介紹了GestureDetector的定義和其提供的一些基本的方法，GestureDetector的好處就是可以把任何一個(gè)widget都賦予類似button的功能。

今天將會(huì)通過(guò)幾個(gè)具體的例子來(lái)講解一下GestureDetector的具體使用。

賦予widget可以點(diǎn)擊的功能
一般情況下，我們的普通widget，比如文本是不能進(jìn)行交互的，但是如果將其用GestureDetector進(jìn)行包裝之后，就可以將其偽裝成為一個(gè)button。

比如我們有這樣一個(gè)偽裝成button的Container：

Container(
        padding: const EdgeInsets.all(12.0),
        decoration: BoxDecoration(
          color: Colors.green,
          borderRadius: BorderRadius.circular(8.0),
        ),
        child: const Text('My Button'),
      )
這個(gè)Container的本質(zhì)是一個(gè)Text，這個(gè)Container本身是沒(méi)有交互功能的，那么如何對(duì)其添加交互功能呢？

最簡(jiǎn)單的辦法就是將其使用GestureDetector包裝起來(lái)，如下所示：

GestureDetector(
      // The custom button
      child: Container(
        padding: const EdgeInsets.all(12.0),
        decoration: BoxDecoration(
          color: Colors.green,
          borderRadius: BorderRadius.circular(8.0),
        ),
        child: const Text('My Button'),
      ),
    )
接下來(lái)我們還要為其添加對(duì)應(yīng)的手勢(shì)，這里我們添加一個(gè)onTap方法，

GestureDetector(
      onTap: ()=> showDialog<String>(
        context: context,
        builder: (BuildContext context) => AlertDialog(
          title: const Text('基本手勢(shì)'),
          content: const Text('這是基本的手勢(shì)，你學(xué)會(huì)了嗎？'),
          actions: <Widget>[
            TextButton(
              onPressed: () => Navigator.pop(context, 'Cancel'),
              child: const Text('Cancel'),
            ),
            TextButton(
              onPressed: () => Navigator.pop(context, 'OK'),
              child: const Text('OK'),
            ),
          ],
        ),
      ),
      ...
這里onTap會(huì)調(diào)用一個(gè)showDialog來(lái)彈出一個(gè)對(duì)話框，運(yùn)行之后結(jié)果如下：



會(huì)動(dòng)的組件
在上面的例子中，我們用手去tap按鈕是沒(méi)有互動(dòng)效果的，也就是說(shuō)按鈕是不會(huì)變化的。

那么有沒(méi)有可能模擬手指的按壓效果呢？

答案是肯定的，flutter為我們提供了一個(gè)InkWell組件，這樣手指按壓下組件會(huì)產(chǎn)生波紋的效果。

那么InkWell和GestureDetector有什么聯(lián)系呢？

InkWell和GestureDetector很類似，都提供了對(duì)手勢(shì)的支持。

在InkWell中提供了多種GestureTapCallback接口，用接收手勢(shì)的回調(diào)，非常的方便。

在使用上，InkWell和GestureDetector也很類似，我們可以完全照搬GestureDetector的用法。

還是上面的例子，我們可以將GestureDetector替換成為InkWell,如下所示：

  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
          content: Text('Tap'),
        ));
      },
      child: const Padding(
        padding: EdgeInsets.all(12.0),
        child: Text('Flat Button'),
      ),
    );
  }
這里，為了更好的觀察手勢(shì)按壓之后的效果，這里onTap選擇展示一個(gè)flutter自帶的SnackBar。

可刪除的組件
在app中的手勢(shì)應(yīng)用上，有一個(gè)比較常見的用法就是在list列表中，向左滑動(dòng)一個(gè)item，會(huì)出現(xiàn)刪除的按鈕，這種滑動(dòng)刪除的效果，如何在flutter中實(shí)現(xiàn)呢？

flutter提供了一個(gè)Dismissible的組件來(lái)實(shí)現(xiàn)這個(gè)效果。

我們先來(lái)看下Dismissible的定義：

class Dismissible extends StatefulWidget {
    const Dismissible({
    required Key key,
    required this.child,
    this.background,
    this.secondaryBackground,
    this.confirmDismiss,
    this.onResize,
    this.onUpdate,
    this.onDismissed,
    this.direction = DismissDirection.horizontal,
    this.resizeDuration = const Duration(milliseconds: 300),
    this.dismissThresholds = const <DismissDirection, double>{},
    this.movementDuration = const Duration(milliseconds: 200),
    this.crossAxisEndOffset = 0.0,
    this.dragStartBehavior = DragStartBehavior.start,
    this.behavior = HitTestBehavior.opaque,
  }) : assert(key != null),
       assert(secondaryBackground == null || background != null),
       assert(dragStartBehavior != null),
       super(key: key);
可以看到Dismissible是一個(gè)StatefulWidget，它有兩個(gè)必須的參數(shù)分別是key和child。

key用來(lái)標(biāo)記要?jiǎng)h除item的id，child是可以滑動(dòng)刪除的組件。

為了演示方便，我們使用ListView來(lái)展示如何使用Dismissible。

首先我們構(gòu)建一個(gè)items的list，里面包含了每個(gè)item要展示的內(nèi)容：

 final items = List<String>.generate(10, (i) => '動(dòng)物 ${i + 1}');
然后使用ListView的builder方法來(lái)構(gòu)建items。并且將每個(gè)items封裝到Dismissible中去：

body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            final item = items[index];
            return Dismissible(
              key: Key(item),
              onDismissed: (direction) {
                setState(() {
                  items.removeAt(index);
                });
                ScaffoldMessenger.of(context)
                    .showSnackBar(SnackBar(content: Text('$item 被刪除了')));
              },
              child: ListTile(
                title: Text(item),
              ),
            );
          },
        )
這里Dismissible的child是ListTile組件，里面的具體內(nèi)容就是Text。

現(xiàn)在Dismissible實(shí)際上就可以工作了，當(dāng)你滑動(dòng)ListTile的時(shí)候，對(duì)應(yīng)的item就會(huì)被刪除。

為了明顯起見，我們可以給Dismissible添加一個(gè)background屬性，這樣滑動(dòng)刪除的時(shí)候就有了一個(gè)背景顏色：

              background: Container(color: Colors.red),
另外，Dismissible還有一個(gè)confirmDismiss屬性，可以用來(lái)判斷是否真的要滑動(dòng)刪除，比如我們只允許從右到左滑動(dòng)刪除，那么可以這樣做：

Dismissible(
  ...
confirmDismiss:confirmResult,
...
)

  Future<bool> confirmResult(DismissDirection direction) async {
    if(direction == DismissDirection.endToStart){
      return true;
    }
    return false;
  }
這里的confirmResult是一個(gè)異步函數(shù)，它接收一個(gè)DismissDirection的參數(shù)，這個(gè)參數(shù)表示的是滑動(dòng)刪除的方向，我們可以通過(guò)這個(gè)方向來(lái)判斷是否真正的進(jìn)行刪除操作。

總結(jié)
以上就是日常手勢(shì)的基本使用了，我們可以通過(guò)GestureDetector，InkWell和Dismissible來(lái)和手勢(shì)進(jìn)行結(jié)合來(lái)實(shí)現(xiàn)相應(yīng)的功能。

本文的例子：https://github.com/ddean2009/learn-flutter.git



作者：程序那些事


歡迎關(guān)注微信公眾號(hào) ：程序那些事