用 Expanded 包裹的 InkWell 不起作用

Question

我正在尝试完成我的应用程序，但是用 Expanded 包装的 InkWell 的 onTap 不起作用，这不是我调用的函数的问题，而是 InkWell 的问题。我该如何解决这个问题？

Expanded(
              child: InkWell(
                onTap: () {
                  setState(() {
                    reset();
                  });
                },
                child: MyCard(
                  height: MediaQuery.of(context).size.height * 0.07,
                  color: Color(0xfff4a261),
                  child: Text(
                    'Reset',
                    style: TextStyle(fontSize: 15),
                  ),
                ),
              ),
            ),

这是我在上面的代码中创建的自定义类

class MyCard extends StatelessWidget {
  final Color color;
  final Widget child;
 
  double height;
 
  MyCard({this.color, this.child, this.height});
 
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(4),
      child: Container(
        height: this.height,
        child: FlatButton(onPressed: () {}, child: this.child),
        decoration: BoxDecoration(
          color: this.color,
          borderRadius: BorderRadius.circular(5),
        ),
      ),
    );
  }
}

Answer 1

Material Widget 是绘制 Inkwell 反应的地方。如果它们之间有任何不透明的图形（例如，使用 Container、DecorationBox 等绘制），则在这些小部件下绘制时，飞溅将不可见。

你可以用一个 Material Widget 包裹 InkWell 来解决这个问题。

         Expanded(
          child: Material(
              child: InkWell(
                   onTap: () {
                   print("Clicked");
                     },
               child: MyCard(
               height: MediaQuery.of(context).size.height * 0.07,
               color: Color(0xfff4a261),
                  child: Text(
                    'Reset',
                       style: TextStyle(fontSize: 15),
                             ),
                          ),
                      ),
                    ) ,
                   );