flutter源码之GestureDetector demo

2019-02-16  本文已影响65人  iCloudEnd

GestureDetector 详细介绍请参考之前的文章《flutter深入研究之GestureDetector》

GestureDetetor 简介

GestureDetector 是检测手势的widget。如果GestureDetector 的child属性不空,GestureDetector将自己大小设置为child的大小。如果child属性为空,它将自己的大小设置为父组件的大小。

Demo功能规划

有个Image组件,计划给Image组件增加点击事件


图片响应点击

Demo源码

初始化项目

import 'package:flutter/material.dart';

void main() => runApp(MyApp());


class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  void initState() {
    super.initState();
    // TODO  初始化是代码
  }



  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: const Text('基础 应用'),
          ),
          body:
          //TODO  step01 add SingleChildScrollView
          SingleChildScrollView(
            child: Center(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  //TODO 计划让Image响应点击
                  new Image.asset(
                    'assets/images/gugong.jpg',
                    fit:BoxFit.fill,
                    width: 100.0,
                    height: 100.0,
                  ),

                  RaisedButton(
                    child: const Text('测试按钮'),
                    onPressed: (){
                      print("点击了一下");

                    },
                  )
                ],
              ),
            ),
          )
      ),
    );

  }
}

运行效果


初始化效果

给image增加个GestureDetector

上一篇 下一篇

猜你喜欢

热点阅读