Flutter：Inkwell不适用于Card

Question

我正在尝试在卡片小部件上实现包装并对其进行包装，但是它根本不起作用。我将Tap保留为null，因为此类使用3个参数，稍后将其填充以生成多个卡。我看不到发生了什么，这阻止了InkWell的起伏，因此我们将不胜感激。

class FeedBackCardsImage extends StatelessWidget {
  final String imagePath;
  final String cardTitle;
  final String cardTag;

  FeedBackCardsImage({
    this.imagePath,
    this.cardTitle,
    this.cardTag,
  });

  @override
  Widget build(BuildContext context) {

      return InkWell(
          child: new Container(
            child: new Card(
              child: new Padding(
                padding: new EdgeInsets.all(15.0),
                child: new Column(
                  children: <Widget>[
                    new SizedBox(
                      height: 184.0,
                      child: new Stack(
                        children: <Widget>[
                          new Positioned.fill(
                            child: new Image.asset(
                              imagePath,
                              //package: destination.assetPackage,
                              fit: BoxFit.contain,
                            ),
                          ),
                        ],
                      ),
                    ),
                    new Padding(
                      padding: new EdgeInsets.all(
                        7.0,
                      ),
                      child: new Text(
                        cardTitle,
                        style: new TextStyle(
                            fontSize: 14.0,
                            fontWeight: FontWeight.w600,
                            color: Colors.black87),
                      ),
                    ),
                    new Padding(
                      padding: new EdgeInsets.all(
                        0.0,
                      ),
                      child: new Text(
                        cardTag,
                        style: new TextStyle(
                            fontSize: 12.0,
                            fontWeight: FontWeight.w400,
                            color: Colors.black54),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        onTap: null,

      );



  }

Answer 1

说明：

“发生的事情是Material规范说飞溅实际上是在Material上的墨水。因此，当我们飞溅时，我们所做的就是从字面上使Material部件执行飞溅。如果您在Material顶部有东西，我们溅在它下面，你看不到它。”

解决方法：

return Stack(children: <Widget>[
            new Card(
              child: new Padding(
                padding: new EdgeInsets.all(15.0),
                child: new Column(
                  children: <Widget>[
                    new SizedBox(
                      height: 184.0,
                      child: new Stack(
                        children: <Widget>[
                          new Positioned.fill(
                            child: new Image.asset(
                              imagePath,
                              //package: destination.assetPackage,
                              fit: BoxFit.contain,
                            ),
                          ),
                        ],
                      ),
                    ),
                    new Padding(
                      padding: new EdgeInsets.all(
                        7.0,
                      ),
                      child: new Text(
                        cardTitle,
                        style: new TextStyle(
                            fontSize: 14.0,
                            fontWeight: FontWeight.w600,
                            color: Colors.black87),
                      ),
                    ),
                    new Padding(
                      padding: new EdgeInsets.all(
                        0.0,
                      ),
                      child: new Text(
                        cardTag,
                        style: new TextStyle(
                            fontSize: 12.0,
                            fontWeight: FontWeight.w400,
                            color: Colors.black54),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            new Positioned.fill(
                child: new Material(
                    color: Colors.transparent,
                    child: new InkWell(
                      onTap: () => null,
                    )))
          ]);

Answer 2

• 圆形Card（无图像）：

  

  final borderRadius = BorderRadius.circular(24);
  
  Card(
    color: Colors.blue, // Backgrond color
    shape: RoundedRectangleBorder(borderRadius: borderRadius),
    child: InkWell(
      borderRadius: borderRadius,
      splashColor: Colors.red, // Splash color
      onTap: () {},
      child: Ink(width: 100, height: 100), 
    ),
  )
  

• 圆形Card（带图像）：

  

  final borderRadius = BorderRadius.circular(24);
  
  Card(
    shape: RoundedRectangleBorder(borderRadius: borderRadius),
    child: InkWell(
      borderRadius: borderRadius,
      splashColor: Colors.brown.withOpacity(0.7), // Splash color
      onTap: () {},
      child: Ink(
        width: 100,
        height: 100,
        decoration: BoxDecoration(
          borderRadius: borderRadius,
          image: DecorationImage(
            fit: BoxFit.cover,
            image: AssetImage('assets/chocolate_image.png'), // Background image
          ),
        ),
      ),
    ),
  )
  

Answer 3

好吧，我是如何做到的，我只是将墨水瓶放入卡片中。树之前是这样的

墨水池 -> 卡片 -> 容器。

墨水池波纹效果对上面的效果不起作用，所以我做了

卡片 -> 材料 -> 墨水池 -> 容器

让我用代码来展示

前

Card(
     margin: EdgeInsets.all(10.0),
     shape: RoundedRectangleBorder(
       borderRadius: BorderRadius.circular(10.0),
     ),
    child: Container(
     // My design code here
    )
)

后

Card(
  margin: EdgeInsets.all(10.0),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10.0),
  ),
  child: Material(
    child: InkWell(
      splashColor: Colors.orange,
      onTap: (){
        print('Tapped!');
      },
      child: Container(
        // My design code here
      )
     ),
    ),
  ),
              

我希望这有帮助！:) 如果有任何问题请告诉我！

Answer 4

我终于通过在父卡小部件和子墨槽小部件中指定相同的边界半径来使此工作正常。其他解决方案不能正确渲染墨水孔动画的圆角。下面对我来说很完美：

Card(
    elevation: 2,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(8),
    ),
    child: InkWell(
      borderRadius: BorderRadius.circular(8),
      onTap: (){},
      child: Container(
        height: 58,
      ),
    ),
  );

Answer 5

最简单的解决方案是让Inkwell小部件带有包含您的小部件的子容器。

这里的重要部分是InkWell小部件上的onTap属性不能为空！

示例：

Card(
    child: InkWell(
        onTap: () {},
        child: Container(
          width: double.infinity,
          padding: EdgeInsets.all(20),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              icon,
              Padding(
                padding: const EdgeInsets.only(top: 8.0),
                child: Text('I'm a card Widget'),
              ),
            ],
          ),
        ),
      ),