点击 Flutter 时 Inkwell Splash Effect 不显示 |扑

Question

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

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

Answer 1

通过检查你的代码 onTap: (){}, 被禁用但是通过添加 onTap 仍然不显示飞溅效果所以我添加了一个额外的 Position 小部件并且通过这个我通过使用 Material[=13 给出了飞溅效果=]

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

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

Answer 2

用 Material 小部件包裹 InkWell。

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

Answer 3

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

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

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

点击 Flutter 时 Inkwell Splash Effect 不显示 |扑

Inkwell Splash Effect not showing in Flutter when taps on it | Flutter

widget

dart

dart-pub

flutter