时间戳

首页 > 解决方案 > 如何在容器顶部显示文本？

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

问题描述

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

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

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

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

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

标签： flutter

解决方案

我认为您正在寻找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),))),
    ])),
 ),

推荐阅读