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),
        ),

预期：Circle头像内的图像上的onclick事件请注意，这是单击后出现的个人资料图片。

Answer 1

另一种方法是将其包裹在一个 IconButton 中，它具有圆形涟漪效应的好处。

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

Answer 2

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

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),
        ),

现在概括我的答案。

如果要将OnClickListener设置为默认未实现onTap的某些小部件，则应使用GestureDetector包裹小部件

Answer 3

您可以使用lapply，但会因点击图像而失去波纹效果，因此更好的解决方案是使用GestureDetector。将InkWell包裹在CircleAvatar

中

InkWell

Answer 4

使用InkWell，将小部件像这样包裹在其中，

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

如何在扑出的CircleAvatar小部件内的图像上添加Onclick事件？

4 个答案: