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

【问题标题】：I can't center more than one widget in stack我不能在堆栈中居中多个小部件
【发布时间】：2019-04-08 13:52:25
【问题描述】：

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

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

【问题讨论】：

Positioned 会为你工作还是你只想和Align 一起工作？
一切都适合我我不希望它用固定的像素值编写。
我认为你最好的方法是使用Align，你应该在那里给出一个固定的值，但是如果你不喜欢固定的方法，最好的方法是使用Column。跨度>
如果我使用 column 那么我不能使用 sizedTransition 动画。
你能不能把你要实现的整个屏幕给我，我会尽力为你提供最好的解决方案。

标签： flutter flutter-layout

【解决方案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(),
      )
    ],
  );
}

【讨论】：

是的，这就是我想要的。但是我现在需要考虑一下图像大小:) 它应该根据图像大小自动计算分数。使用静态硬编码值可能会导致问题。
您正在使用资产中的图像，所以我认为硬编码不会成为问题，如果您要使用Image.network()，那么技巧部分就是使用LayoutBuilder .但是，您应该很好地使用硬编码值。

【解决方案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),
        ),
      ),
    ],
  );
}

【讨论】：