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小部件发挥作用。如果你有在材料顶部的某些东西，我们会在其下面飞溅，而您不能看到它。”

解决方法：

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(
    elevation: 2,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(8),
    ),
    child: InkWell(
      borderRadius: BorderRadius.circular(8),
      onTap: (){},
      child: Container(
        height: 58,
      ),
    ),
  );

Answer 3

我知道这是一篇老文章，对于那些面临相同问题的人，您需要做的是将InkWell堆叠在您创建的自定义小部件之上，为Material应用提供透明背景

Stack( children: <Widget>[
       YourWidget(),//            
        Container(         
          width: width,// full width
          height: width,// full height of the container the stack is in
            child: Material(
              // animationDuration: Duration(milliseconds:800),
          color: Colors.transparent,
          child: InkWell(
            onTap: (){
               Scaffold.of(context).showSnackBar(SnackBar(
      content: Text('Tap'),
    ));
            },
            highlightColor:  Colors.red,
            hoverColor: Colors.red,
            focusColor: Colors.red,
            child: Text("wow"),
          ),
        ))
      ],
    ));

Answer 4

最简单的解决方案是拥有一个 Inkwell 小部件，其中包含一个子 Container ，其中包含您的小部件。

这里重要的部分是您在 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'),
              ),
            ],
          ),
        ),
      ),

Answer 5

对于具有tap属性以波动的窗口小部件，onTap方法上的值不应为null。给onTap像（）=> null; 希望回答了！

Answer 6

您可以将窗口小部件内容放入raised button中，而不必使用卡和墨水池，而使用onPressed代替点击。那么您可以指定服装形状，波纹形状也将相同。

RaisedButton(
  elevation: 20,
  padding: EdgeInsets.all(0),
  onPressed: (){},
  shape: ContinuousRectangleBorder(
    borderRadius: BorderRadius.circular(100),
  ),
  color: Colors.red,
  child: Container(
    alignment: Alignment.topCenter, //raised button aligns to center automaticaly so you can use alignment so the widget will be aligned the way you want
    margin: EdgeInsets.only(top: 16),
    child: Text("cool"),
  ),
),

Answer 7

好的，那是怎么做的，我只是将墨水瓶放在卡中。在树像之前

墨水瓶->卡->容器。

墨k纹波效果不适用于上述效果，所以我做到了

卡片->材料->墨well->容器

让我显示代码

之前

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 8

要在上面有图像的卡片上获得 Inkwell 涟漪效果（飞溅），您可以为此使用 Ink.image 类..效果很好..

"dependencies": {
    "@angular/animations": "^11.2.3",
    "@angular/cdk": "^11.2.3",
    "@angular/common": "^11.2.3",
    "@angular/compiler": "^11.2.3",
    "@angular/compiler-cli": "^11.2.3",
    "@angular/core": "^11.2.3",
    "@angular/forms": "^11.2.3",
    "@angular/localize": "^11.2.6",
    "@angular/material": "^11.2.3",
    "@angular/platform-browser": "^11.2.3",
    "@angular/platform-browser-dynamic": "^11.2.3",
    "@angular/platform-server": "^11.2.3",
    "@angular/router": "^11.2.3",
    "@ngrx/core": "^1.2.0",
    "@ngrx/store": "^11.0.1",
    "@nguniversal/express-engine": "^11.2.1",
    "@types/body-parser": "^1.19.1",
    "@types/pdfjs-dist": "^2.7.4",
    "angular-fusioncharts": "3.0.4",
    "braintree-web-drop-in": "^1.27.0",
    "clipboard": "^2.0.8",
    "core-js": "^3.9.1",
    "croppie": "^2.6.5",
    "crypto-js": "^3.1.9-1",
    "enhanced-resolve": "^5.7.0",
    "express": "^4.15.2",
    "file-saver": "^2.0.5",
    "fusioncharts": "3.15.1-sr.1",
    "hammerjs": "^2.0.8",
    "html2canvas": "^1.0.0-rc.7",
    "html2pdf.js": "^0.9.2",
    "jspdf": "^2.3.1",
    "mydatepicker": "^9.0.2",
    "ng-lazyload-image": "^9.1.0",
    "ng2-dragula": "^2.1.1",
    "ng2-nouislider": "^1.8.3",
    "ng2-pdf-viewer": "^6.4.1",
    "ngx-gallery-9": "^1.0.6",
    "ngx-perfect-scrollbar": "^10.0.1",
    "ngx-scroll-event": "^2.0.2",
    "ngx-webcam": "0.2.0",
    "node": "^12.14.0",
    "node-sass": "4.11.0",
    "nouislider": "^14.6.4",
    "recordrtc": "5.4.2",
    "rxjs": "^6.6.6",
    "rxjs-compat": "^6.6.7",
    "zone.js": "^0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1002.3",
    "@angular/cli": "^11.2.3",
    "@nguniversal/builders": "^11.2.1",
    "@types/express": "^4.17.0",
    "@types/hammerjs": "^2.0.32",
    "@types/jasmine": "2.5.38",
    "@types/jest": "^26.0.22",
    "@types/jspdf": "^1.3.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "node-sass": "^5.0.0",
    "protractor": "~7.0.0",
    "ts-node": "~2.0.0",
    "tslint": "~6.1.0",
    "typescript": "^4.1.5",
    "webdriver-manager": "10.2.5",
    "webpack-bundle-analyzer": "^2.9.0"
  }
}

Answer 9

要查看卡片上的波纹动画，请尝试将onTap: null更改为onTap: () {}

Flutter：Inkwell不适用于Card

9 个答案:

之前

之后