如何在颤动中向 CircleAvatar Widget 内部的图像添加 Onclick 事件？答案

【问题标题】：How to add an Onclick event to an image which is inside CircleAvatar Widget in flutter?如何在颤动中向 CircleAvatar Widget 内部的图像添加 Onclick 事件？
【发布时间】：2019-11-08 10:59:48
【问题描述】：

我在 circleAvatar 内有一个圆形图像，单击时我想打开一个警报对话框。我的问题是如何在 CircleAvatar 中添加点击事件？

这是我的代码：

        Column(children: <Widget>[
        SizedBox(height: 32.0),
        CircleAvatar(
          radius: 55.0,
          backgroundImage: ExactAssetImage('assets/cat.jpg'),
        ),
        Container(
          height: 20.0,
        ),
        Text('01:29:30'),
        Text(
          'Avik Kumar Mandal',
          style: TextStyle(fontSize: 20),
        ),

预期：圆形头像内的图像上的 onclick 事件 P.s 是个人资料图片，点击后会出现一个对话框。

【问题讨论】：

我认为您必须将CircleAvatar 与另一个小部件包装在一起

标签： flutter dart

【解决方案1】：

你可以用手势检测器包裹你的圆形头像

Column(children: <Widget>[
        SizedBox(height: 32.0),
        GestureDetector(
                onTap: () {
                 //do what you want here
                },
                child:  CircleAvatar(
                       radius: 55.0,
                        backgroundImage: ExactAssetImage('assets/cat.jpg'),
                ), 
           ),

        Container(
          height: 20.0,
        ),
        Text('01:29:30'),
        Text(
          'Avik Kumar Mandal',
          style: TextStyle(fontSize: 20),
        ),

或者

InkWell(
  onTap: () => print("image clicked"),
  child: AnyWidget()
),

现在概括一下我的答案。

如果您想将OnClickListener 设置为默认未实现onTap 的某个小部件，则应使用GestureDetector 或InkWeel 包装该小部件

【讨论】：

是的 onclick 正在工作，但是当我添加一个警告框时，这不是 onclicking 你知道为什么会这样吗？
GestureDetector( onTap: () { print('onclick'); AlertDialog(title: Text('title'), content: Text('body'), ); 那就是我正在使用警报盒子

【解决方案2】：

你可以使用GestureDetector，但是你会失去图片点击的涟漪效应，所以更好的解决方案是使用InkWell。将您的 CircleAvatar 包裹在 InkWell 中

InkWell(
  onTap: () => print("image clicked"),
  child: CircleAvatar(
    backgroundImage: ExactAssetImage('assets/cat.jpg'),
    radius: 55,
  ),
),

【讨论】：

如果您对版主如何处理您的标记有疑问，请发送至Meta Stack Overflow。
@MartijnPieters 我想有人已经问过这样的问题了。不管怎样，我不得不承认你是唯一一个有这么多空闲时间的版主。我们真的需要像你这样的人。

【解决方案3】：

使用InkWell，将您的小部件包装在其中，就像，

InkWell(
  onTap: () => _yourMethodHere,
CircleAvatar(
          radius: 55.0,
          backgroundImage: ExactAssetImage('assets/cat.jpg'),
  ),
),

【讨论】：

【解决方案4】：

另一种方法是将其包装在一个 IconButton 中，这具有圆形波纹效果的好处。

IconButton(
  icon: CircleAvatar(),
  onPressed: () {},
)

【讨论】：