Question

我正在开发我的第一个Flutter App，但遇到了两个问题。 -容纳我的Container小部件的Image小部件未显示在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小部件时应该有一个Splash。

Answer 1

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

flutter:
  assets:
    - images/

一旦有了它，就可以访问“ / images”中的所有图像或所需项目中的任何文件夹名称。现在，您可以通过以下方式访问图片：

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

请记住，图像不受波纹材料效果的影响，仅受其背景的影响（如果图像位于具有“空”空间的较大容器内）。其次，您需要使用InkWell和onTap:方法来显示波纹，完成所有操作，您需要一个Material小部件，因为它提供了必要的效果。

因此，如果要在图像后面看到波纹效果并将其放入堆栈中，则需要执行以下操作：

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"),
                        ),
                 ),
             ],
    ),
)

窗口小部件未显示在堆栈上，并且InkResponse上没有墨水效果

1 个答案: