android-studio - 小部件未显示在 Stack 上并且 InkResponse 上没有 Ink 效果

Question

我正在开发我的第一个 Flutter 应用程序，我遇到了两个问题。- 容纳我的 Image 小部件的 Container 小部件没有显示在 Stack 小部件上。

• 点击 InkResponse 容器时没有 Ink 效果

我尝试重写 Container 以显示图像，并使用 Image.Network 作为 url 而不是 Assets ，但无济于事。

  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 时应该有一个 Splash小部件。

Answer 1

首先，您的图像需要添加到您的 pubspec.yaml 文件中，如下所示:

flutter:
  assets:
    - images/

一旦你有了它，你就可以访问“/images”中的所有图像或你想要的项目中的任何文件夹名称。现在您可以通过这种方式访问​​您的图像:

Image.asset("images/myimage.jpg") // again, this in an example

请记住，图像不受波纹 Material 效果的影响，仅受其背景的影响(如果图像位于具有“空白”空间的较大容器内)。其次，您需要一个带有 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"),
                        ),
                 ),
             ],
    ),
)