对齐容器中的多个文本

Question

我现在尝试用各种小部件设计容器，很遗憾，我无法继续进行许多优化尝试。所以我想问一下您将如何处理它。我想设计一个如下的容器。也许有人可以告诉我这样的结构看起来最好。我尝试了不同的结构，例如

ListView-> Stack -> Container -> Row -> Column -> Align -> Text ..

每次我都无法对齐文本。

Answer 1

只需使用Spacer占用Column中的所有剩余空间。试试这个：

 Column(
      children: <Widget>[
        SizedBox(height: 12),
        Text("Facebook"),
        Spacer(),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 8),
              child: Text("Sales:"),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 8),
              child: Text("200Mio."),
            )
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 8),
              child: Text("HeadQuarters:"),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 8),
              child: Text("New York"),
            )
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 8),
              child: Text("Employee:"),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 8),
              child: Text("200Tsd."),
            )
          ],
        )
      ],
    );

这里是有关Spacer的视频：https://www.youtube.com/watch?v=7FJgd7QN1zI