【Flutter】Flutter 手勢交互 ( 跟隨手指運(yùn)動的小球 )

文章目錄

一、Flutter 手勢 - 跟隨手指運(yùn)動的小球

三、完整代碼示例

三、相關(guān)資源

一、Flutter 手勢 - 跟隨手指運(yùn)動的小球

設(shè)置小球坐標(biāo)變量 : 其中 currentX 是距離左側(cè)邊界的距離 , currentY 是距離右側(cè)邊界的距離 ;

/// 當(dāng)前小球的 x 坐標(biāo) double currentX = 0; /// 當(dāng)前小球的 y 坐標(biāo) double currentY = 0;

1

2

3

4

5

小球的位置 : 小球是在 Stack 幀布局中的 Positioned 組件 , 其 left 和 top 字段值設(shè)置其坐標(biāo) , 分別對應(yīng) currentX 和 currentY 值 ;

// 小球 Positioned( /// 當(dāng)前位置 left: currentX, top: currentY, )

1

2

3

4

5

6

監(jiān)聽事件 : 監(jiān)聽 GestureDetector 組件的 onPanUpdate 事件 , 其回調(diào)方法是 void Function(DragUpdateDetails details) 類型的 方法 , 可以從 DragUpdateDetails 類型參數(shù)中獲取當(dāng)前 x , y 的移動距離 , 該距離需要與之前的距離累加 , 才能得到準(zhǔn)確的坐標(biāo)值 ;

在回調(diào)方法中調(diào)用 setState 方法 , 修改成員變量 currentX 和 currentY , 從而修改 Positioned 組件的位置 , 以達(dá)到小球移動的目的 ;

/// 手勢檢測組件 child: GestureDetector( /// 移動操作 onPanUpdate: (e){ setState(() { // e 中只能獲取到 delta 值 , 需要逐步累加 currentX += e.delta.dx; currentY += e.delta.dy; }); }, )

1

2

3

4

5

6

7

8

9

10

11

代碼示例 :

// 小球 Positioned( /// 當(dāng)前位置 left: currentX, top: currentY, /// 手勢檢測組件 child: GestureDetector( /// 移動操作 onPanUpdate: (e){ setState(() { // e 中只能獲取到 delta 值 , 需要逐步累加 currentX += e.delta.dx; currentY += e.delta.dy; }); }, // 黑色小球 child: Container( width: 40, height: 40, decoration: BoxDecoration( color: Colors.black, borderRadius: BorderRadius.circular(20), ), ), ),),

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

三、完整代碼示例

完整代碼示例 :

import 'package:flutter/material.dart'; class GesturePage extends StatefulWidget { @override _GesturePageState createState() => _GesturePageState(); } class _GesturePageState extends State { /// 當(dāng)前小球的 x 坐標(biāo) double currentX = 0; /// 當(dāng)前小球的 y 坐標(biāo) double currentY = 0; @override Widget build(BuildContext context) { return MaterialApp( // 設(shè)置主題 theme: ThemeData( primarySwatch: Colors.amber, ), // 設(shè)置主體組件 home: Scaffold( // 設(shè)置標(biāo)題欄 appBar: AppBar( title: Text("手勢檢測"), // 返回按鈕設(shè)置 leading: GestureDetector( // 點擊事件回調(diào)函數(shù) onTap: (){ // 退出當(dāng)前界面 Navigator.pop(context); }, // 回退按鈕圖標(biāo) child: Icon(Icons.arrow_back), ), ), // 水平/垂直方向平鋪組件 body: FractionallySizedBox( // 水平方向平鋪 widthFactor: 1, // 幀布局 child: Stack( children: [ // 垂直方向線性布局 Column( children: [ // 手勢檢測組件 GestureDetector( // 點擊事件 onTap: (){ print("雙擊"); }, // 雙擊事件 onDoubleTap: (){ print("雙擊"); }, // 長按事件 , ()=>方法名(參數(shù)列表) 即可回調(diào)一個現(xiàn)有方法 onLongPress: () => _longPress(), // 點擊取消 onTapCancel: (){ print("點擊取消"); }, // 點擊按下 onTapDown: (e){ print("點擊按下"); }, // 點擊抬起 onTapUp: (e){ print("點擊抬起"); }, // 手勢檢測的作用組件 , 監(jiān)聽該組件上的各種手勢 child: Container( // 子組件居中 alignment: Alignment.center, // 內(nèi)邊距 padding: EdgeInsets.all(100), // 背景裝飾 decoration: BoxDecoration( color: Colors.green, ), child: Text( "手勢檢測", style: TextStyle( fontSize: 50, color: Colors.red, ), ), ), ) ], ), // 小球 Positioned( /// 當(dāng)前位置 left: currentX, top: currentY, /// 手勢檢測組件 child: GestureDetector( /// 移動操作 onPanUpdate: (e){ setState(() { // e 中只能獲取到 delta 值 , 需要逐步累加 currentX += e.delta.dx; currentY += e.delta.dy; }); }, // 黑色小球 child: Container( width: 40, height: 40, decoration: BoxDecoration( color: Colors.black, borderRadius: BorderRadius.circular(20), ), ), ),), ], ), ), ), ); } /// 長按事件 void _longPress(){ print("長按"); } }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

運(yùn)行效果 :

三、相關(guān)資源

參考資料 :

Flutter 官網(wǎng) : https://flutter.dev/

Flutter 開發(fā)文檔 : https://flutter.cn/docs ( 強(qiáng)烈推薦 )

官方 GitHub 地址 : https://github.com/flutter

Flutter 中文社區(qū) : https://flutter.cn/

Flutter 實用教程 : https://flutter.cn/docs/cookbook

Flutter CodeLab : https://codelabs.flutter-io.cn/

Dart 中文文檔 : https://dart.cn/

Dart 開發(fā)者官網(wǎng) : https://api.dart.dev/

Flutter 中文網(wǎng) ( 非官方 , 翻譯的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/

Flutter 相關(guān)問題 : https://flutterchina.club/faq/ ( 入門階段推薦看一遍 )

博客源碼下載 :

GitHub 地址 : https://github.com/han1202012/flutter_cmd ( 隨博客進(jìn)度一直更新 , 有可能沒有本博客的源碼 )

博客源碼快照 : https://download.csdn.net/download/han1202012/15484718 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )

Flutter

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。