Flutter - 处理手势

Flutter - 处理手势

点击,滑动等等手势。

处理点击

步骤

  • 创建自定义button类
  • 在其中使用GestureDetector并复写onTap回调

代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import 'package:flutter/material.dart';

/// 自定义button
class ButtonSample1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
final snackBar = SnackBar(content: Text("Now you tap the $this"),);
Scaffold.of(context).showSnackBar(snackBar);
},
child: Container(
padding: EdgeInsets.all(12.0),
margin: EdgeInsets.all(12.0),
decoration: BoxDecoration(color: Theme
.of(context)
.buttonColor,
borderRadius: BorderRadius.circular(8.0)),
child: Text("$this"),),
);
}

}

参考: https://flutter.io/cookbook/gestures/handling-taps/

带波纹效果的按钮

使用InkWell

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/// 带有波纹效果的按钮
class ButtonSample2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return InkWell(
onTap: () {
final snackBar = SnackBar(content: Text("Now you tap the $this"),);
Scaffold.of(context).showSnackBar(snackBar);
},
child: Container(
padding: EdgeInsets.all(12.0),
child: Text("$this"),
),
);
}
}

Flutter提供的按钮控件还有RaisedButtonFlatButton

列表侧滑删除

步骤:

  • 创建一个列表
  • Dismissible包装每一个item
  • 提供删除时的UI显示

创建列表

1
final items = List<String>.generate(10, (i) => "Item $i");

创建字符串列表。这个列表不能放在build中,要定义为State的全局变量。
否则删除item时,无法从view tree中移除item,从而报错。

删除时的UI

设置Dismissible的background,可以在删除时显示。

示例界面代码

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
import 'package:flutter/material.dart';

/// 侧滑删除列表界面
class SwipeToDismissPage extends StatefulWidget {
SwipeToDismissPage({Key key}) : super(key: key);

@override
State<StatefulWidget> createState() {
return SwipeState();
}
}

class SwipeState extends State<SwipeToDismissPage> {
final items = List<String>.generate(10, (i) => "Item $i"); // 列表必须放在外面定义

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
"Swipe to dismiss",
),
),
body: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
final item = items[index];
return Dismissible(
key: Key(item),
onDismissed: (direction) {
setState(() {
items.removeAt(index);
print(direction);
});
Scaffold.of(context)
.showSnackBar(SnackBar(content: Text('remove $item')));
},
child: ListTile(
title: Text('$item'),
),
background: Container(
color: Colors.red,
),
);
}),
);
}
}

选择GestureDetector的响应形式

1
behavior: HitTestBehavior.opaque

https://docs.flutter.io/flutter/rendering/HitTestBehavior-class.html


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!