如何在Stack中使用Positioned小部件（flutter）？

Question

13 浏览2023年1月16日

匿名的 2023年1月16日

0 Comments

这段代码有什么问题吗？定位元素没有显示出来，但其他元素都显示出来了。deviceHeight在其他地方被定义为设备的高度。

第一个容器包含了其他两个容器。第二个容器在顶部正确显示，但第三个（被定位的）容器却没有显示出来。欢迎听到任何替代方案。

Align(


  alignment: Alignment.bottomCenter,
  child: Stack(
    children: [
      Container(
        color: Color(bgDark),
        height: deviceHeight / 100 * 40,
      ),
      Container(color: Colors.red, height: deviceHeight / 18),
      Positioned(
        top: 50,
        child: Container(
          color: Colors.green, 
          height: deviceHeight / 1
        )
      )
    ]
  )
)

0

1 答案

匿名的 · Answer 1 · 2023-07-16T16:54:22+00:00

在使用Flutter的Stack布局中，Positioned组件无法正常工作的原因可能是缺少了宽度（width）属性。解决方法是在Positioned组件的Container中添加width属性，并设置一个具体的宽度值。这样做可以使Positioned组件在Stack布局中正常显示出来。

具体的代码如下：

Align(


  alignment: Alignment.bottomCenter,
  child: Stack(
    children: [
      Container(
        color: Colors.blue,
        height: 300,
      ),
      Container(
        color: Colors.red,
        height: 200,
      ),
      Positioned(
        top: 50,
        child: Container(
          color: Colors.green,
          height: 100,
          width: 100,
        ),
      ),
    ],
  ),
);

关于问题的具体原因并不确定，但似乎Positioned组件需要同时提供height和width属性的值。