Question

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

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

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

我想在两张纸牌上闪烁文字，这种文字在几秒钟内才可见，例如，“做得好”。尽管我总是乐于提供帮助，但我认为这将成为(Rich)Text()小部件和某种计时器或Duration对象，并且我可以弄清楚。

我正在努力解决的问题是弄清楚如何创建一个在两个图像之上并跨越两个图像的文本叠加层。我是否需要做类似将更高级别的Row()对象包装在Stack()中的操作？我讨厌所有这些嵌套，而且我不知道如何使文本始终位于其他所有内容之上。

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

Answer 2

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

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

在Row()居中和child:Text()居中的情况下，所有内容都对齐并看起来不错。但是，我确实认为我需要花费时间并了解Positioned()小部件。我认为这最终将是一个更好的解决方案。

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

2 个答案: