使用 Flutter 在可点击的图像上显示文本答案

【问题标题】：Display text over a clickable image using Flutter使用 Flutter 在可点击的图像上显示文本
【发布时间】：2020-04-20 15:50:40
【问题描述】：

我正在尝试在可点击的图像上显示一些文本。我使用 InkWell 小部件使图像可点击，并使用 Stack 小部件覆盖 Text 小部件：

new Expanded(
  child: new Stack(
    children: <Widget>[
      new InkWell(
        onTap: (){ _doSomething(); },
        child: Image.asset("images/my-image.jpg"),
      ),
      new Text("Some text"),
    ],
  ),
)

这样我只能点击没有填充文本的图像部分，这不好。即使点击了覆盖文本，我也希望我的功能能够运行。

我尝试使用 FlatButton 小部件而不是 Text 并以某种方式工作，但我确信这不是正确的方法。你有什么建议吗？

new Expanded(
  child: new Stack(
    children: <Widget>[
      new InkWell(
        onTap: (){ _doSomething(); },
        child: Image.asset("images/my-image.jpg"),
      ),
      new FlatButton(
        onPressed: (){_doSomething;},
        child: Text("Some text"),
      )
    ],
  ),
),

【问题讨论】：

标签： flutter dart material-design

【解决方案1】：

如果您将InkWell 移到堆栈的更高位置会怎样？

Expanded(
  child: InkWell(
    onTap: (){ _doSomething(); },
    child: Stack(
      children: <Widget>[
        Image.asset("images/my-image.jpg"),
        Text("Some text"),
      ],
    ),
  ),
),

【讨论】：

【解决方案2】：

将堆栈放入 Inkwell。

Expanded(
      child: InkWell(
        onTap: () => _doSomething(),
        child: Stack(
          children: <Widget>[
            Image.asset("images/my-image.jpg"),
            Text("Some text"),
          ],
        ),
      ),
    )

【讨论】：