Flutter 的绝对位置答案

【问题标题】：Position absolute for FlutterFlutter 的绝对位置
【发布时间】：2020-08-10 09:43:45
【问题描述】：

我是来自 Web 开发方面的 Flutter 新手。只是为了好玩和练习 Flutter 布局，我想做一个“架子鼓”应用程序。但问题是，我无法按应有的方式设置 Drum Kit 部件。

您知道在网页开发中，网页上的元素有绝对位置选项。 Flutter 有类似的东西吗？

我会很感激任何答案。谢谢。 :)

让我展示一下我的预期：Here it is

这是我得到的结果：Result

【问题讨论】：

请粘贴您的代码。避免发布图片，因为它们的内容无法被索引

标签： flutter flutter-layout

【解决方案1】：

     Stack(
children: <Widget>[
  Positioned(
    top: 100,
    left: 0,
    right: 0,
    child: Text("Search",
          style: TextStyle(
              color: Color(0xff757575),
              fontWeight: FontWeight.w700,
              fontFamily: "Roboto",
              fontStyle: FontStyle.normal,
              fontSize: 56.0),
          textAlign: TextAlign.center),
  ),
 ]
 )

你可以试试这个你可以在屏幕上固定位置

【讨论】：

【解决方案2】：

Stack 小部件和 Positioned 小部件可帮助您实现这一目标：

根据官方文档：

Stack 是一个小部件，其子元素相对于其框的边缘进行定位。如果您想以一种简单的方式重叠多个子项，例如有一些文本和一个图像，用渐变覆盖并在底部附加一个按钮，则该类很有用。

Positioned 是一个小部件，用于控制 Stack 的子代的位置。定位小部件必须是 Stack 的后代。

在此处阅读有关Stack 小部件的更多信息：Stack Widget

在此处阅读有关 Positioned 小部件的更多信息：Positioned Widget

以您的示例为例，您将需要创建一个 Stack 小部件，并且 Stack 小部件的 children 属性应该是您的 drum parts 包装在 Positioned 小部件中。 Positioned 小部件只能在 Stack 小部件中使用。

【讨论】：

【解决方案3】：

您可以使用Stack class，它将有一个Positioned class

它有什么帮助

堆栈帮助您拥有relative-layout
Positioned 可帮助您调整 web 中的 absolute 等项目

【讨论】：