在 Flutter 中点击时不显示 Inkwell Splash Effect |扑答案

【问题标题】：Inkwell Splash Effect not showing in Flutter when taps on it | Flutter在 Flutter 中点击时不显示 Inkwell Splash Effect |扑
【发布时间】：2021-01-23 07:08:16
【问题描述】：

  Widget build(BuildContext context) {
    return Column(
      children: [
        InkWell(
          child: CircleAvatar(
            radius: 40,
            backgroundColor: Colors.grey[600],
            child: CircleAvatar(
              radius: 37,
              backgroundColor: Colors.white,
              child: Stack(
                children: [
                  Positioned(
                    top: 4,
                    left: 4,
                    bottom: 4,
                    right: 4,
                    child: IconButton(
                      icon: Icon(
                        icon,
                        size: 40,
                        color: Colors.grey[600],
                      ),
                      onPressed: onpress,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),

点击此按钮时，我没有得到任何飞溅效果或任何其他效果。我也为不同的小部件添加了墨水池，但它仍然无法正常工作

【问题讨论】：

标签： flutter dart widget dart-pub

【解决方案1】：

通过检查您的代码 onTap: (){}, 已禁用，但通过添加 onTap 仍然不显示飞溅效果，因此我添加了一个额外的位置小部件，由此我使用 Material 给出了飞溅效果

InkWell(
                onTap: (){},
                splashColor: Colors.brown,
                child: CircleAvatar(
                  radius: 40,
                  backgroundColor: Colors.grey[600],
                  child: CircleAvatar(
                    radius: 37,
                    backgroundColor: Colors.white,
                    child: Stack(
                      children: [
                        Positioned(
                          top: 4,
                          left: 4,
                          bottom: 4,
                          right: 4,
                          child: IconButton(
                            icon: Icon(
                              Icons.ten_k,
                              size: 40,
                              color: Colors.grey[600],
                            ),
                            onPressed: () {},
                          ),
                        ),
                        Positioned(  // This I'm added
                          left: 0.0,
                          top: 0.0,
                          bottom: 0.0,
                          right: 0.0,
                          child: Material(   
                            type: MaterialType.transparency,
                            child: InkWell(
                              onTap: () async {
                                await Future.delayed(
                                    Duration(milliseconds: 200));

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

【讨论】：

您应该注意您添加/更改的内容，而不仅仅是粘贴完整的代码。

【解决方案2】：

用Material 小部件包裹InkWell。

Material(
  child: InkWell(
    child:...
    onTap:(){ //<-- must not be null otherwise it is considered as disabled
    }
  )
)

【讨论】：

【解决方案3】：

您必须将onTap 参数添加到InkWell 小部件，否则它将被禁用，因此不会有任何效果。

你的InkWell 小部件应该是这样的：

  InkWell(
        onTap: () {},
        child: CircleAvatar(
          radius: 40,
          child: ....,
        ),
      ),

【讨论】：