我无法定位小部件

Question

我必须使用Stack和Positioned小部件作为我的布局，但我还需要确保我的小部件居中，所以我不能使用左，右。

  Widget _body() {
    return Stack(
      children: <Widget>[
        Positioned(
          left: 0,
          child: _animation(),
        ),
        Positioned(
          top: 300,
          child: Text(
            "Centered Text",
            style: TextStyle(color: Colors.black87, fontSize: 30),
          ),
        Positioned(
          top: 350,
          child: Text(
            "Second Centered Text",
            style: TextStyle(color: Colors.black87, fontSize: 30),
          ),
        ),
      ],
    );
  }

文本小部件应居中。

Answer 1

你应该在第二个小部件中使用Align。

Widget _body() {
  return Stack(
    children: <Widget>[
      Positioned(
        left: 0,
        child: Text("Text here"),
      ),
      Align(
        child: Text(
          "Centered Text",
          style: TextStyle(color: Colors.black87, fontSize: 30),
        ),
      ),
    ],
  );
}

Answer 2

如果你不想使用Align，那么你可以做的就是没问题。

Widget _body() {
  return Stack(
    alignment: Alignment.center, // you need this
    children: <Widget>[
      Positioned(
        top: 0,
        left: 0,
        child: Text("Text here"),
      ),
      Positioned(
        top: 300,
        child: Text(
          "Centered Text",
          style: TextStyle(color: Colors.black87, fontSize: 30),
        ),
      ),
      Positioned(
        top: 350,
        child: Text(
          "Second Centered Text",
          style: TextStyle(color: Colors.black87, fontSize: 30),
        ),
      ),
    ],
  );
}