我不能在堆栈中居中多个小部件

Question

我想出于某种原因使用堆栈，我的所有小部件都应该居中。当我使用一个定位和一个对齐时，这没关系。但是，使用第二个对齐小部件不会放在第一个文本下。

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

我想达到这个enter image description here

Answer 1

Widget _buildBody() {
  return Stack(
    alignment: Alignment.center,
    children: <Widget>[
      Align(
        alignment: Alignment(0, -0.95),
        child: Image.asset('assets/images/profile.jpg', width: 200, height: 200, fit: BoxFit.cover,),
      ),
      Align(
        alignment: Alignment(0, -0.35),
        child: Text("Centered Text"),
      ),
      Align(
        alignment: Alignment(0, -0.1),
        child: Text("Second centered text"),
      ),
      Align(
        alignment: Alignment(0, 0.1),
        child: CircularProgressIndicator(),
      )
    ],
  );
}

Answer 2

如果你想和Align一起去，这就是你需要的。

Widget _body() {
  return Stack(
    alignment: Alignment.center,
    children: <Widget>[
      Positioned(
        top: 0,
        left: 0,
        child: Text("Text here"),
      ),
      Align(
        child: Text(
          "Centered Text",
          style: TextStyle(color: Colors.black87, fontSize: 30),
        ),
      ),
      Align(
        alignment: Alignment(0.0, 0.1), // change this value to place it below the 1st centered widget
        child: Text(
          "Second Centered Text",
          style: TextStyle(color: Colors.black87, fontSize: 30),
        ),
      ),
    ],
  );
}