如何将 Onclick 事件添加到颤动中 CircleAvatar 小部件内的图像？

Question

我在 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 事件 Ps 它是单击时应出现的对话框的个人资料图片。

Answer 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

Answer 2

您可以使用，GestureDetector但您会在图像点击时失去涟漪效应，因此更好的解决方案是使用InkWell. 包裹你CircleAvatar的InkWell

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