Flutter 如何添加点击事件

通过查看官方文档有三中方法添加点击事件，分别为:InkWell,GestureDetector,RaisedButton。

Snip20200707_2.png

• 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,
               ),
             ),
           ),
         ],
       );
    }
  }
}