如何使用Flutter布局小部件准确定位文本？

Question

我正在尝试在 Flutter 布局中的特定 X/Y 坐标处叠加文本。这就是我想要实现的目标：

目前，我的布局如下所示：

我希望文本位于 X: 39 和 Y: 82。

我尝试过使用

Positioned

，但我无法使其正常工作。我知道

Stack

也可能是一个解决方案。有人可以解释一下如何使用 Flutter 的布局小部件准确定位文本吗？

代码：

class LogIn extends StatefulWidget {
  const LogIn({Key? key}) : super(key: key);

  @override
  State<LogIn> createState() => _LogInState();
}

class _LogInState extends State<LogIn> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Color(0xffF24004),
        body: Center(
          child: Container(
              width: 350,
              height: 350,
              decoration: BoxDecoration(
                  image: DecorationImage(
                image: AssetImage("lib/img/pomodoro.png"),
              ))),
        ),
      ),
    );
  }
}

Answer 1

您将需要在堆栈内使用定位小部件。

位置小部件允许您放置在 X 和 Y

而堆栈确保位置小部件不被任何其他小部件绑定。

用这两个小部件包裹你的容器，如下所示：

Stack(
  children[
    Positioned(
      left: 39,
      top: 82
      child: Container(
              width: 350,
              height: 350,
              decoration: BoxDecoration(
                image: DecorationImage(
            image: AssetImage("lib/img/pomodoro.png"),
          ))),
         )
       ]
)