定位在堆栈内

时间:2019-05-22 11:12:28

标签: dart flutter flutter-layout

如何正确定位小部件?

我认为定位应该是通过一些模板而不是眼睛。

假设我希望白色方块位于黑色容器的顶部中心,一半在黑色容器内部,一半在外部,我该怎么做?

enter image description here

代码:

Positioned(
                top: 80,
                right: 30,
                left: 30,
                child: Container(
                  height: 200,
                  width: 400.0,
                  color: Colors.black,
                  child: Column(
                    children: <Widget>[],
                  ),
                ),
              ),
              Positioned(
                top: 40,
                child: Container(
                  height: 100.0,
                  width: 100.0,
                  color: Colors.white,
                ),
              ),

1 个答案:

答案 0 :(得分:1)

您可以尝试这样

Stack(
      alignment: Alignment.center,
      children: <Widget>[
          Positioned(
            top: 80,
            right: 30,
            left: 30,
            child: Container(
              height: 200,
              width: 400.0,
              color: Colors.black,
              child: Column(
                children: <Widget>[],
              ),
            ),
          ),
          Positioned(
            top: 40,
            child: Container(
              height: 100.0,
              width: 100.0,
              color: Colors.white,
            ),
          ),
      ],
    )