通过查看官方文档有三中方法添加点击事件,分别为:
InkWell
,GestureDetector
,RaisedButton
。
- 1.上图中序号
1
使用的是InkWell
进行添加的。使用方式就是用InkWell包裹住组件。
InkWell(
child: buildButtonColum(Icons.call, 'CALL'),
onTap:(){
print('CALL');
},
),
- 2.序号
2
使用的GestureDetector
,相当于ios中的手势事件。
示例代码1:
class SampleApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: GestureDetector(
child: FlutterLogo(
size: 200.0,
),
onTap: () {
print("tap");
},
),
),
);
}
}
示例代码2:
GestureDetector(
child: buildButtonColum(Icons.near_me, 'ROUTE'),
onTap: (){
print('ROUTE');
},
),
- 3.图中序号
3
为RaisedButton
,这个就类似于 ios 中我们经常使用的UIButton
。
示例代码1:
@override
Widget build(BuildContext context) {
return RaisedButton(
onPressed: () {
print("click");
},
child: Text("Button"),
);
}
示例代码2:
RaisedButton(
child: buildButtonColum(Icons.near_me, 'SHARE'),
onPressed: (){
print('SHARE');
},
),
示例代码中的
buildButtonColum()
方法为自定义方法。
class SampleApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
Column buildButtonColum(IconData icon, String label){
Color color = Theme.of(context).primaryColor;
return new Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
new Icon(icon, color: color,),
new Container(
margin: const EdgeInsets.only(top: 8.0),
child: new Text(
label,
style: new TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w400,
color: color,
),
),
),
],
);
}
}
}