網站首頁編程語言正文

Flutter實現手勢識別功能詳解方法_Android

作者：@我不認識你 ? 更新時間： 2022-12-14 編程語言

GestureDetector

GestureDetector 是手勢識別的組件，可以識別點擊、雙擊、長按事件、拖動、縮放等手勢

點擊事件

點擊相關事件包括：

onTapDown：按下時回調。
onTapUp：抬起時回調。
onTap：點擊事件回調。
onTapCancel：點擊取消事件回調。

按下然后抬起調用順序

onTapDown-> onTapUp-> onTap

按下后移動調用順序

onTapDown-> onTapCancel

示例

class _YcHomeBodyState extends State<YcHomeBody> {
  String desc = '';
  Color containerColor = Colors.red;
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Column(
        children: [
          Container(
            width: 420,
            height: 330,
            color: containerColor,
          ),
          const SizedBox(
            width: 100,
            height: 20,
          ),
          Text("點擊事件：$desc")
        ],
      ),
      onTapDown: (TapDownDetails tapDownDetails) {
        setState(() {
          desc += '按下,';
          containerColor = Colors.blue;
        });
      },
      onTapUp: (TapUpDetails tapUpDetails) {
        setState(() {
          desc += '抬起,';
          containerColor = Colors.red;
        });
      },
      onTap: () {
        setState(() {
          desc += '點擊,';
          containerColor = Colors.yellow;
        });
      },
      onTapCancel: () {
        setState(() {
          desc += '取消,';
          containerColor = Colors.pink;
        });
      },
    );
  }
}

雙擊事件

雙擊是快速且連續2次在同一個位置點擊，雙擊監聽使用onDoubleTap方法

return GestureDetector(
  child: Column(
    children: [
      Container(
        width: 420,
        height: 330,
        color: containerColor,
      ),
      const SizedBox(
        width: 100,
        height: 20,
      ),
      Text("點擊事件：$desc")
    ],
  ),
  onDoubleTap: () {
    setState(() {
      desc = '雙擊了';
    });
  },

長按事件

長按事件（LongPress）包含長按開始、移動、抬起、結束事件，說明如下：

onLongPressStart：長按開始事件回調。
onLongPressMoveUpdate：長按移動事件回調。
onLongPressUp：長按抬起事件回調。
onLongPressEnd：長按結束事件回調。
onLongPress：長按事件回調。

示例

return GestureDetector(
  child: Column(
    children: [
      Container(
        width: 420,
        height: 330,
        color: containerColor,
      ),
      const SizedBox(
        width: 100,
        height: 20,
      ),
      Text("點擊事件：$desc")
    ],
  ),
  onLongPressStart: (v) {
    setState(() {
      desc += '長按開始,';
      print("長按開始：$v");
    });
  },
  onLongPressMoveUpdate: (v) {
    setState(() {
      desc += '長按移動,';
      print("長按移動：$v");
    });
  },
  onLongPressUp: () {
    setState(() {
      desc += '長按抬起,';
      print("長按抬起");
    });
  },
  onLongPressEnd: (v) {
    setState(() {
      desc += '長按結束,';
      print("長按結束：$v");
    });
  },
  onLongPress: () {
    setState(() {
      desc += '長按回調,';
      print("長按回調");
    });
  });

執行順序

1、長按開始->回調->結束->抬起
2、長按開始->回調->移動->結束->抬起

水平/垂直拖動事件

垂直/水平拖動事件包括按下、開始、移動更新、結束、取消事件，以垂直為例說明如下：

onVerticalDragDown：垂直拖動按下事件回調
onVerticalDragStart：垂直拖動開始事件回調
onVerticalDragUpdate：指針移動更新事件回調
onVerticalDragEnd：垂直拖動結束事件回調
onVerticalDragCancel：垂直拖動取消事件回調

GestureDetector(
  onVerticalDragStart: (v) => print('onVerticalDragStart'),
  onVerticalDragDown: (v) => print('onVerticalDragDown'),
  onVerticalDragUpdate: (v) => print('onVerticalDragUpdate'),
  onVerticalDragCancel: () => print('onVerticalDragCancel'),
  onVerticalDragEnd: (v) => print('onVerticalDragEnd'),
  child: Center(
    child: Container(
      width: 200,
      height: 200,
      color: Colors.red,
    ),
  ),
)

縮放事件

縮放（Scale）包含縮放開始、更新、結束。說明如下：

onScaleStart：縮放開始事件回調。
onScaleUpdate：縮放更新事件回調。
onScaleEnd：縮放結束事件回調。

GestureDetector(
  onScaleStart: (v) => print('onScaleStart'),
  onScaleUpdate: (ScaleUpdateDetails v) => print('onScaleUpdate'),
  onScaleEnd: (v) => print('onScaleEnd'),
  child: Center(
    child: Container(
      width: 200,
      height: 200,
      color: Colors.red,
    ),
  ),
)

InkWell

InkWell 組件在用戶點擊時出現“水波紋”效果。事件和屬性挺多的，就看一下常用的

設置水波紋顏色

點擊和長按都能夠觸發水波紋，點擊波紋效果快，長按波紋效果慢

 return  InkWell(
      onTap: (){
        print("點擊了");
      },
      splashColor: Colors.red,
      child: const Text('點擊InkWell，水波紋'),
    );

給字體添加邊距和圓角邊框，擴大“水波紋”效果：

Center(
      child: InkWell(
          onTap: () {
            print("點擊了");
          },
          splashColor: Colors.red,
          child: Container(
              padding: const EdgeInsets.all(10),
              decoration: BoxDecoration(
                  border: Border.all(color: Colors.red),
                  borderRadius: const BorderRadius.all(Radius.circular(20))),
              child: const Text('點擊InkWell，水波紋'))),
    );

可以看到水波紋會超出圓角，為了解決這個問題可以使用Ink

Ink

Ink控件用于在[Material]控件上繪制圖像和其他裝飾，以便[InkWell]、[InkResponse]控件的“水波紋”效果在其上面顯示。

  return Center(
        child: Ink(
      decoration: const BoxDecoration(
          gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [Color(0xFFDE2F21), Color(0xFFEC592F)]),
          borderRadius: BorderRadius.all(Radius.circular(20))),
      child: InkWell(
        borderRadius: const BorderRadius.all(Radius.circular(20)),
        child: Container(
          padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 20),
          child: const Text(
            '這是InkWell的點擊效果',
            style: TextStyle(color: Colors.white),
          ),
        ),
        onTap: () {},
      ),
    ));
  }

總感覺有點復雜，InkWell 會導致水紋超出邊框，就需要外面再套一層組件，然后還要寫個漸變，不知道咋形容。

Listener

Listener 是一個監聽指針事件的控件，比如按下、移動、釋放、取消等指針事件，但Listener無法監聽鼠標特有的事件，比如：移入、懸停、移出事件。鼠標事件使用MouseRegion監聽。

通常情況下，監聽手勢事件使用GestureDetector，GestureDetector是更高級的手勢事件。

Listener的事件介紹如下：

onPointerDown：按下時回調
onPointerMove：移動時回調
onPointerUp：抬起時回調

Listener(
  onPointerDown: (PointerDownEvent pointerDownEvent) {
    print('$pointerDownEvent');
  },
  onPointerMove: (PointerMoveEvent pointerMoveEvent) {
    print('$pointerMoveEvent');
  },
  onPointerUp: (PointerUpEvent upEvent) {
    print('$upEvent');
  },
  child: Container(
    height: 200,
    width: 200,
    color: Colors.blue,
    alignment: Alignment.center,
  ),
)

常用屬性說明如下：

position：相對屏幕的坐標的偏移。

localPosition：相對當前控件的偏移。

pressure：按壓力度。

delta：2次指針移動事件的偏移。

orientation：指針移動方向

案例

進度按鈕

// 使用枚舉定義按鈕的狀態
enum ButtonStates { none, loading, done }
class YcHomeBody extends StatefulWidget {
  const YcHomeBody({Key? key}) : super(key: key);
  @override
  State<YcHomeBody> createState() => _YcHomeBodyState();
}
class _YcHomeBodyState extends State<YcHomeBody> {
  //定義按鈕的狀態
  ButtonStates _buttonStates = ButtonStates.none;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: MaterialButton(
        color: Colors.blue,
        textColor: Colors.white,
        minWidth: 200,
        height: 40,
        //通過自定義方法，根據情況返回相應的組件
        child: _build(),
        onPressed: () {
          //點擊按鈕后將按鈕狀態變為加載中
          setState(() {
            _buttonStates = ButtonStates.loading;
            //延遲2s后將狀態變為完成
            Future.delayed(const Duration(seconds: 2), () {
              setState(() {
                _buttonStates = ButtonStates.done;
              });
            });
          });
        },
      ),
    );
  }
  //自定義方法
  _build() {
    if (_buttonStates == ButtonStates.none) {
      //無狀態
      return const Text("登錄");
    } else if (_buttonStates == ButtonStates.loading) {
      //進度條組件
      return const CircularProgressIndicator(
        backgroundColor: Colors.white,
        strokeWidth: 2,
      );
    } else if (_buttonStates == ButtonStates.done) {
      return const Icon(
        Icons.check,
        color: Colors.white,
      );
    }
  }
}

代碼看著很長但是邏輯很簡單，定義了一個枚舉類型的按鈕類型。一開始類型為無狀態，此時顯示登錄；當點擊按鈕后，狀態變為加載中，顯示圓形進度條組件；2s后將按鈕狀態變為加載完成，現成完成的圖標

原文鏈接：https://blog.csdn.net/weixin_41897680/article/details/127778262

上一篇：Python桌面文件清理腳本分享_python
下一篇：Jetpack?Compose?DropdownMenu手指

日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

網站首頁編程語言正文

Flutter實現手勢識別功能詳解方法_Android

目錄

GestureDetector

點擊事件

雙擊事件

長按事件

水平/垂直拖動事件

縮放事件

InkWell

Ink

Listener

案例

相關推薦

日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

網站首頁 編程語言 正文

Flutter實現手勢識別功能詳解方法_Android

目錄

GestureDetector

點擊事件

雙擊事件

長按事件

水平/垂直拖動事件

縮放事件

InkWell

Ink

Listener

案例

相關推薦

網站首頁編程語言正文