Flutter Flame 教程4 - Input 輸入

我跑步前腳先著地發表於2020-05-04
Flutter

Input 輸入

Gestures 手勢

在package:flame/gestures.dart檔案中，你可以找到所有能夠被包含在你的遊戲類例項中接收所有觸控輸入事件的mixin集合。以下是所有的mixin和它的方法：

- TapDetector
  - onTap
  - onTapCancel
  - onTapDown
  - onTapUp

- SecondaryTapDetector
  - onSecondaryTapDown
  - onSecondaryTapUp
  - onSecondaryTapCancel

- DoubleTapDetector
  - onDoubleTap

- LongPressDetector
  - onLongPress
  - onLongPressStart
  - onLongPressMoveUpdate
  - onLongPressUp
  - onLongPressEnd

- VerticalDragDetector
  - onVerticalDragDown
  - onVerticalDragStart
  - onVerticalDragUpdate
  - onVerticalDragEnd
  - onVerticalDragCancel

- HorizontalDragDetector
  - onHorizontalDragDown
  - onHorizontalDragStart
  - onHorizontalDragUpdate
  - onHorizontalDragEnd
  - onHorizontalDragCancel

- ForcePressDetector
  - onForcePressStart
  - onForcePressPeak
  - onForcePressUpdate
  - onForcePressEnd

- PanDetector
  - onPanDown
  - onPanStart
  - onPanUpdate
  - onPanEnd
  - onPanCancel

- ScaleDetector
  - onScaleStart
  - onScaleUpdate
  - onScaleEnd
複製程式碼

這些檢測器很多會相互衝突，比如，你不能同時註冊Vertical(垂直)和Horizontal(水平)拖動，所以不是所有的東西都可以同時使用。

所有這些方法都是從GesutreDetector widget的一個映象，所以你可以從這裡瞭解更多關於Flutter的手勢。

Example 例子

    class MyGame extends Game with TapDetector {
        
        @override
        void onTapDown(TapDownDetails details){
            print("Player tap down on ${details.globalPosition.dx} - ${details.globalPosition.dy}")
        }
        
        @override
        void onTapUp(TapUpDetails details) {
            print("Player tap up on ${details.globalPosition.dx} - ${details.globalPosition.dy}");
        }
    }
複製程式碼

你可以在這個例子中學習更多。

Tapable components 可以點選的元件

Flame也提供了簡單的輔助類，使得PositionComponent可以更簡單的處理觸控事件。通過使用mixin Tapable，你的元件可以實現以下方法，就能輕鬆使用觸控事件了。

    void onTapCancel() {}
    void onTapDown(TapDownDetails details) {}
    void onTapUp(TapUpDetails details) {}
複製程式碼

最小的元件使用例項:

    import 'package:flame/components/component.dart';
    import 'package:flame/components/mixins/tapable.dart';
    
    class TapableComponent extends PositionComponent with Tapable {
        
        @override
        void onTapUp(TapUpDetails details){
            print("tap up");
        }
        
        @override
        void onTapDown(TapDownDetails details){
            print("tap down");
        }
        
        @override
        void onTapCancel() {
            print("tap cancel");
        }
    }
複製程式碼

Keyboard 鍵盤

Flame提供了一種簡單的方式來訪問Flutter關於訪問鍵盤輸入事件的功能。

只需要將KeyboardEvents mixin新增到你的game類中就能使用了。這樣你需要實現onKeyEvent方法，每當鍵盤事件發生時，這個方法都會呼叫，它接收一個Flutter RawKeyEvent類的例項，它可以被用在獲取事件的資訊，比如這是個鍵按下和放開事件，按住的鍵等等。

最簡單的例子:

    import 'package:flame/game.dart';
    import 'package:flame/keyboard.dart';
    import 'package:flutter/services.dart';
    
    class MyGame extends Game with KeyboardEvents {
        
        @override
        void onKeyEvent(e){
            final bool isKeyDown = e is RawKeyDownEvent;
            print(" Key: ${e.data.keyLabel} - isKeyDown: $isKeyDown");
        }
    }
複製程式碼

你可以在此處檢視更完整的示例。

相關文章