小部件不显示在堆栈上，并且在InkResponse上没有墨迹效果
小部件不显示在堆栈上，并且在InkResponse上没有墨迹效果
提问于 2019-06-20 01:57:27
我正在开发我的第一个Flutter应用程序，我遇到了两个问题。-包含我的Image小部件的Container小部件不显示在Stack小部件上。
- 轻触
InkResponse容器
时没有墨迹效果
我尝试重写Container以显示图像，并使用Image.Network代替资产作为url，但都无济于事。
final appLogo = new Container(
child: new Image(
image: new AssetImage('assets/discord.png')
),
);
List<Widget> _getApps(List apps) {
List<Widget> _appWidgets = <Widget>[];
// make a Grid tile of the Apps
for (int i = 0; i < apps.length; i++) {
_appWidgets.add(
new InkResponse(
child: Center(
child: new Stack(
children: <Widget>[
appLogo,
new Container(height: 102, width: 102, color: Colors.red),
],
)
)
),
);
}
return _appWidgets;
}appLogo应该显示在我期望的红色框(Container)上，并且当我点击InkResponse小部件时应该会有一个闪屏。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-06-20 03:25:19
首先，需要将图像添加到pubspec.yaml文件中，如下所示：
flutter:
assets:
- images/一旦你有了它，你就可以访问"/images“中的所有图片或者你想要的项目中的任何文件夹名称。现在您可以通过以下方式访问您的镜像：
Image.asset("images/myimage.jpg") // again, this in an example请记住，图像不受涟漪材质效果的影响，只受其背景的影响(如果图像位于具有“空”空间的较大容器中)。其次，您需要一个带有onTap:方法的InkWell来显示波纹，为了完成所有操作，您需要一个Material小部件，因为这个小部件提供了必要的效果。
因此，如果你想看到图像背后的涟漪效果，并将其放在Stack中，你需要做一些类似的事情：
Material(
child: Stack(
children: <Widget>[
InkWell(
onTap: () {}, // The ripple only shows up if you have a onTap method.
child: Container(
height: 300, // 300 is a random value but has bigger height than the image itself.
child: Image.asset("images/myimage.jpg"),
),
),
],
),
)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56673410
复制相关文章
相似问题