Flutter点击事件实现

GestureDetector

(1)创建自定义button类
(2)在其中使用GestureDetector并复写onTap回调

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

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 TapableButton 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"),),
);
}

}

InkWell

带波纹效果的按钮使用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"),
),
);
}
}

Button

Flutter提供的按钮控件有RaisedButton和FlatButton等。

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :