轻敲容器会触发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里面,但都是徒劳的.

推荐答案

我觉得给容器加 colored颜色 盖住了墨水的效果

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 说明书上说飞溅的实际上是material 上的墨水.所以当我们飞溅时,我们所做的就是让Material小工具进行飞溅.如果你在material 上面有什么东西,我们会溅到它下面,而你看不到它.

我想添加一个"MaterialMage"小部件,从概念上将其图像打印到material 中,这样飞溅物就会覆盖在图像上.我们可以用一种类似的material 来装饰.或者我们可以让material 本身进行装饰.现在它需要一种 colored颜色 ,但我们可以扩展到整个装饰.不过,目前还不清楚有梯度的material 是否真的符合material 规格,所以我不确定我们是否应该这样做.

在短期内,如果您只需要解决办法,您可以将material 放在容器的顶部,material 设置为使用"透明"类型,然后将墨水很好地放入容器中.

--你好

更新:Hixiego 年合并了一种新的墨水解决方案.墨水提供了一种在图像上飞溅的便捷方式.

  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_paint_测试的代码.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

Flutter相关问答推荐

使用Bg晃动背景图像边界

当MyChangeNotifier更改时如何计算函数,而无需在构建方法中进行不必要的调用- Flutter

如何更改默认应用程序启动器/启动屏幕

Box约束强制无限高:SizedBox. Expand()

在创建肘部并使用冻结时,无法使用中的Copy With方法

如何实现Flutter 梳理机图像的小量移动

GitHub Actions工作流secret中的特殊字符未被保留

Flutter守护进程无法启动

Flutter:使用不包含导航器的上下文请求导航器操作

断言失败:std::move(hal_2_1_verifier).Run(). 初始化,LE音频客户端至少需要Bluetooth音频HAL V2.1

如何将取消图标放置在右上角

如何从Firebase登录获取用户信息,如电话号码、出生日期和性别

Flutter firebase_auth 和 firebase_core 依赖错误

Riverpod中stateNotiferProvider和notifierProvider的区别

如何修复 ICU Lexing 错误:Flutter 中的意外字符

底部工作表顶部的一块 Flutter

Firebase 中的查询限制 - .orderBy() 错误

仅使用 Flutter 在本地环境中托管 Web 服务器

Getx Flutter 在更新值时抛出空错误

在 Flutter 中单击时切换按钮 colored颜色 没有改变