InkWell没有显示涟漪效应

小开

最佳答案

我认为给容器添加颜色是在掩盖墨水的效果

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

这实际上是预期的，尽管我们应该更新文档使其更清楚。

发生的事情是，材料规格说，飞溅实际上是墨水在材料上。当我们进行splash时，我们做的是让材质小部件进行splash。如果你在材质上面有什么东西，我们在它下面飞溅，你看不到它。

我想添加一个“物质形象”;小部件，概念上打印它的图像到材料以及，然后飞溅将在图像上。我们可以用MaterialDecoration来做类似的装饰。或者我们可以让材料本身作为装饰。现在它需要一种颜色，但我们可以把它扩展到整个装饰。虽然不清楚它是否真的与材质规格兼容，但有一个渐变的材质，所以我不确定我们是否应该这样做。

在短期内，如果你只是需要一个变通的办法，你可以把一个材质放在容器的顶部，材质设置为“透明”。打字，然后把墨水放进去。

——hixie

更新:Hixie去年合并了一个新的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_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

小开

InkWell()将永远不会显示涟漪效应，直到您添加

onTap : () {}

或任何回调，如onDoubleTap, onLongPress等。

当你指定这个参数时，InkWell才会开始监听你的点击。

小开

我在ListView中创建InkWell的交替颜色时遇到了同样的问题。在这种特殊情况下，有一个简单的解决方案:将交替对象包装在一个使用透明色调/亮度变化的容器中——InkWell触摸动画仍然在它下面可见。不需要材料。注意，在尝试使用material来解决这个问题时，还有其他问题——例如，它将覆盖你正在使用的默认的DefaultTextStyle(它会安装AnimatedDefaultTextStyle)，这是一个巨大的痛苦。

小开

截图:

使用包装在InkWell中的Ink小部件。

InkWell(
onTap: () {}, // Handle your onTap
child: Ink(
width: 200,
height: 200,
color: Colors.blue,
),
)

小开

更好的方法是使用Ink小部件而不是任何其他小部件。

你可以在Ink小部件本身中定义它，而不是在容器内定义color。

下面的代码将工作。

Ink(
color: Colors.orange,
child: InkWell(
child: Container(
width: 100,
height: 100,
),
onTap: () {},
),
)

不要忘记在InkWell中添加onTap: () {}，否则它会

小开

InkWell小部件必须有一个材质小部件作为祖先，否则它不能显示效果。例如:
```
Material(
child : InkWell(
child : .....
```

you have to add onTap method to see the actual effects as like

 Buttons {RaisedButton,FlatButton etc}.
e.g -> Material(
child : InkWell(
onTap : (){}
child : .....

Let's come to the main points see some examples below and try to understand the actual concepts of InkWell.

In Below example Material is parent of InkWell with onTap but it still not working. Please try to understand the concept of it. You should provide some margin to container or other widget to show the effects. Actually below code working fine but we can't see because we did not provide any margin or align so it has no space to show the effects.
```
Widget build(BuildContext context) {
return Center(
child: Material(
child: new InkWell(
onTap: () {
print("tapped");
},
child: new Container(
width: 100.0,
height: 100.0,
color: Colors.orange,
),
),
),
);
}
```

Below example show InkWell effects only to upwards because we provide space {margin}.

Widget build(BuildContext context) {
return Center(
child: Material(
child: new InkWell(
onTap: () {
print("tapped");
},
child: new Container(
margin: EdgeInsets.only(top: 100.0),
width: 100.0,
height: 100.0,
color: Colors.orange,
),
),
),
);
}

Below exp. show the effects in all the page because center create margin from all the side. Centre align it's child widget from top, left, right and bottom.

Widget build(BuildContext context) {
return Center(
child: Material(
child: new InkWell(
onTap: () {
print("tapped");
},
child: Center(
child: new Container(
width: 100.0,
height: 100.0,
color: Colors.orange,
),
),
),
),
);
}

小开

这是我发现并一直使用的最好的方法。你可以试试。

用InkWell包装你的Widget
用Material包装InkWell

无论如何设置不透明度为0%。例如:color: Colors.white.withOpacity(0.0),

Material(
color: Colors.white.withOpacity(0.0),
child: InkWell(
child: Container(width: 100, height: 100),
onTap: (){print("Wow! Ripple");},
),
)

小开

我遇到了一个类似的问题，将一个Inkwell添加到现有的复杂小部件中，用一个容器包装一个带有颜色的BoxDecoration。通过添加材质和墨水井，墨水井仍然被盒子装饰遮挡，所以我只是让盒子装饰的颜色稍微不透明，这样墨水井就能被看到

小开

循环部件的解决方案，如下所示:

Material(
color: Colors.transparent,
child: Container(
alignment: Alignment.center,
height: 100,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
IconButton(
enableFeedback: true,
iconSize: 40,
icon: Icon(
Icons.skip_previous,
color: Colors.white,
size: 40,
),
onPressed: () {}),
IconButton(
iconSize: 100,
enableFeedback: true,
splashColor: Colors.grey,
icon: Icon(Icons.play_circle_filled, color: Colors.white, size: 100),
padding: EdgeInsets.all(0),
onPressed: () {},
),
IconButton(
enableFeedback: true,
iconSize: 40,
icon: Icon(
Icons.skip_next,
color: Colors.white,
size: 40,
),
onPressed: () {}),
],
),
),
)

小开

我已经找到了这个解决方法。我认为它可以帮助你:

Material(
color: Theme.of(context).primaryColor,
child: InkWell(
splashColor: Theme.of(context).primaryColorLight,
child: Container(
height: 100,
),
onTap: () {},
),
)

Color被赋给Material小部件。它是小部件的默认颜色。你可以使用Inkwell的splashColor属性来调整涟漪效果的颜色

小开

添加onTap:(){}侦听器后，涟漪效应应该可以正常工作。如果你在InkWell()小部件中使用BoxShadow() with，它就不起作用。

小开

这对我来说很管用:

Material(
color: Colors.white.withOpacity(0.0),
child: InkWell(
splashColor: Colors.orange,
child: Text('Hello'), // actually here it's a Container wrapping an image
onTap: () {
print('Click');
},
));

在这里尝试了很多答案后，我得出的答案是:

设置splashColor
在Material(color: Colors.white.withOpacity(0.0), ..)中包装InkWell

感谢这里的答案让我明白了这两点

小开

对我来说，这是另一个问题。InkWell没有显示涟漪效应，当我有onTap功能作为我的小部件定义如下参数。

Function(Result) onTapItem;
...
onTap: onTapItem(result),

我不知道有什么不同，但下一个代码工作得很好。

onTap: (){ onTapItem(result); },

小开

如果你想在任何小部件上使用涟漪效果，只需:

1-用材料和墨水池包装小部件。

2-将color设置为来自材料的widget。

3- 从来没有设置颜色为你想让它产生波纹的小部件。

   Material (
color: const Color(0xcffFF8906),
child: InkWell(
ontap:() { },
child: Container(
color: Colors.transparent,
height: 80,
width: 80,
)

小开

我可以通过使用Stack使我的情况工作。

Stack(
children: [
MyCustomWidget(), //              <--- Put this on bottom
Material(
color: Colors.transparent,
child: InkWell(
onTap: () {},
child: Ink(
width: 100,
height: 100,
),
),
),
],
),

本页上的其他答案对我不起作用的原因是我的自定义小部件隐藏了墨水效果，而且我没有一个普通的图像(所以我不能使用ink .image)。

编辑:

如果你将图像转换为正确的格式，你仍然可以使用Ink.image。

小开

为材质添加透明颜色在我的案例中起作用:

  child: new Material(
color: Colors.transparent
child: new InkWell(
onTap: (){},
child: new Container(
width: 100.0,
height: 100.0,
color: Colors.amber,
),
),
),

小开

现在使用MaterialButton，在更新的版本颤振


Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: MaterialButton(
child: Text(
labelText,
style: TextStyle(fontSize: 22),
),
onPressed: () {},
color: backgroundColor,
height: 45,
minWidth: double.infinity,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(16),
),
),
),
);
}

小开

child: Material(
color: Colors.transparent
child: InkWell(
onTap: (){ print("this Ripple!";},
splashColor: Colors.greenAccent,
child: Container(
height:100.0,
color: Colors.white,
),
),
),

在InkWell之前添加Material，并将color设置为Colors.transparent。

小开

为了处理连锁反应，你应该使用以下规则:

onTap不应该是null(或为空)。
InkWell必须在任何材质小部件中

小开

创建一个支持开发. xml的小部件。

将其包装在InkWell小部件中以管理点击回调和波纹李动画。< / >

这是文档中提到的两点

例子:

InkWell(
child: TextButton(
onPressed: () {},
child: Text('Tapped'),
),
),
),

小开

用简单的话快速解决:

此解决方案适用于小部件树的任何位置。只需要在InkWell之前添加额外的材质，就像这样:

return Container(
.......code.......
),
child: Material(
type: MaterialType.transparency,
child: InkWell(
onTap: () {},
child: Container(
.......code.......
),
),
),
);

< p >参考: https://api.flutter.dev/flutter/material/InkWell-class.html

.

小开

一行:

在InkWell中使用splashColor小部件。

InkWell(
onTap: () {}, // Handle your onTap
splashColor: Colors.grey,
child: Container(
width: 200,
height: 200,
),
)

小开

您可能已经在主题或材质的父元素中设置了属性

ThemeData(
...
splashFactory: NoSplash.splashFactory,
...
)

如果你不想要飞溅效果的特定使用它明确

 InkWell(
splashFactory: NoSplash.splashFactory,
...
child: Row(
...
)
);

小开

确保你没有在材质主题中添加以下属性:

(对我来说，这就是问题所在)

splashColor: Colors.transparent
splashFactory: NoSplash.splashFactory

如:-

MaterialApp(
home:......,
theme: ThemeData(
splashFactory: NoSplash.splashFactory, // Remove this
splashColor: AppColors.transparent, // Remove this OR Change the color
......
),
)

小开

用Material包裹InkWell，然后使用你需要的颜色:

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: Material(
color: Colors.orange,
child: new InkWell(
onTap: (){ print("tapped"); },
child: new Container(
width: 100.0,
height: 100.0,
),
),
),
),
);
}
}