Flutter 如何添加点击事件

349 阅读1分钟

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

2121726-2db55cea29c29452.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.图中序号3RaisedButton,这个就类似于 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,
               ),
             ),
           ),
         ],
       );
    }
  }
}