InkWell 没有显示涟漪效应

小编典典

InkWell 没有显示涟漪效应

all

点击容器会触发onTap()处理程序，但不会显示任何墨水飞溅效果。

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new InkWell(
          onTap: (){print("tapped");},
          child: new Container(
            width: 100.0,
            height: 100.0,
            color: Colors.orange,
          ),
        ),
      ),
    );
  }
}

我也尝试将其放入InkWell内部，Container但徒劳无功。

阅读 71

2022-07-28

共1个答案

小编典典

我认为给容器添加颜色覆盖了墨水效果

https://api.flutter.dev/flutter/material/InkWell/InkWell.html

这段代码似乎工作

  body: new Center(
    child: new Container(
      child: new Material(
        child: new InkWell(
          onTap: (){print("tapped");},
          child: new Container(
            width: 100.0,
            height: 100.0,
          ),
        ),
        color: Colors.transparent,
      ),
      color: Colors.orange,
    ),
  ),

只需单击中间的正方形。

编辑：我找到了错误报告。https://github.com/flutter/flutter/issues/3782

这实际上符合预期，尽管我们应该更新文档以使其更清晰。

发生的事情是材质规范说飞溅实际上是材质上的墨水。所以当我们飞溅时，我们所做的就是让 Material
小部件进行飞溅。如果您在材质之上有什么东西，我们会在它下面飞溅，而您看不到它。

我想添加一个“MaterialImage”小部件，它在概念上也将其图像打印到材质中，这样飞溅就会覆盖在图像上。我们可以有一个
MaterialDecoration，它对装饰做类似的事情。或者我们可以让 Material
本身进行装饰。现在它需要一种颜色，但我们可以将其扩展到整个装饰。不过，尚不清楚具有渐变的材质是否真的与材质规范兼容，所以我不确定我们是否应该这样做。

在短期内，如果您只是需要一个解决方法，您可以在容器顶部放置一个材质，将材质设置为使用“透明”类型，然后将墨水很好地放入其中。

--hixie

更新：Hixie 去年合并了一个新的 Ink 解决方案。Ink 提供了一种在图像上飞溅的便捷方式。

  testWidgets('Does the Ink widget render anything', (WidgetTester tester) async {
    await tester.pumpWidget(
      new Material(
        child: new Center(
          child: new Ink(
            color: Colors.blue,
            width: 200.0,
            height: 200.0,
            child: new InkWell(
              splashColor: Colors.green,
              onTap: () { },
            ),
          ),
        ),
      ),
    );


Material(
  color: Colors.grey[800],
  child: Center(
    child: Ink.image(
      image: AssetImage('cat.jpeg'),
      fit: BoxFit.cover,
      width: 300.0,
      height: 200.0,
      child: InkWell(
        onTap: () { /* ... */ },
        child: Align(
          alignment: Alignment.topLeft,
          child: Padding(
            padding: const EdgeInsets.all(10.0),
            child: Text('KITTEN', style: TextStyle(fontWeight: FontWeight.w900, color: Colors.white)),
          ),
        )
      ),
    ),
  ),
)

请注意：我没有测试新的 Ink Widget。我处理了来自 ink_paint_test.dart 和 Ink 类文档的代码

https://github.com/Hixie/flutter/blob/1f6531984984f52328e66c0cd500a8d517964564/packages/flutter/test/material/ink_paint_test.dart

https://github.com/flutter/flutter/pull/13900

https://api.flutter.dev/flutter/material/Ink-
class.html

2022-07-28