如何在容器顶部显示文本？答案

【问题标题】：How to display text on top of containers?如何在容器顶部显示文本？
【发布时间】：2020-01-17 21:40:12
【问题描述】：

我正在创建一个纸牌游戏，我的 UI 有一个 Column()，其中包含各种子小部件组合。一个孩子是Row

Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Container(),
      Container(),
    ],
  ),

Container() 小部件每个都显示看起来像扑克牌的东西。他们有BoxDecorations提供一个边框+一个Row().的孩子@The Row的孩子显示一个数字（文本）和一套西装（图片）。

我想在两张扑克牌上闪现文字，这些文字只显示几秒钟，例如“干得好”。尽管我总是乐于提供帮助，但我认为这相当于(Rich)Text() 小部件和某种计时器或 Duration 对象，我可以弄清楚。

我正在努力解决的是如何创建一个覆盖两个图像的文本叠加层。我是否必须做一些事情，比如将更高级别的Row() 对象包装在Stack() 中？我讨厌所有的嵌套，而且我不知道如何让文本始终位于其他所有内容之上。

【问题讨论】：

将一排卡片叠成一叠，将文字放在该行之后。我认为没有比这更简单的了。 “在其他一切之上”是指在卡片之上或每个 UI 元素之上？
卡片的图片或草图将帮助您获得正确答案
你解决了吗？

标签： flutter

【解决方案1】：

我认为您正在寻找Overlay 小部件：

 Scaffold(
    body: Container(child: Overlay(initialEntries: [
      OverlayEntry(builder: (_) => Image.network("https://source.unsplash.com/random", fit: BoxFit.cover,)),
      OverlayEntry(builder: (_) => Center(child: Text("Overlay", style: TextStyle(color: Colors.yellow),))),
    ])),
 ),

【讨论】：

@AlC 如果这不是您要查找的内容，请告诉我删除此内容。
不，一定要保留。感谢您的回复。

【解决方案2】：

现在我要使用（伪代码）：

Stack(
    children: <Widget>[
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(),
          Container(),
        ],
      ),
      Center(
        child: Text(),
      ),
    ],
  ),

Row() 居中，child:Text() 居中，一切都排列整齐，看起来不错。但是，我确实认为我需要花时间了解Positioned() 小部件。我认为这最终会是一个更好的解决方案。

【讨论】：