颤动如何为行中的每个子项设置多个交叉轴对齐

Question

如何为行或列的每个子项设置不同的横轴对齐方式？

    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(width: 100, height: 100, color: Colors.blue),
        Container(width: 100, height: 500, color: Colors.red),
        Container(width: 100, height: 300, color: Colors.green),
        Container(width: 100, height: 200, color: Colors.yellow),
        Container(width: 100, height: 100, color: Colors.purple),
      ],
    );

我想在顶部放蓝色框，中间放绿色，底部放黄色

Answer 1

您可以使用Alignclass 为每个 Widget 设置对齐方式

例如，如果您希望容器位于屏幕的左上方，您应该说

    Align(
          alignment: Alignment.topLeft,
          child: Container(width: 100, height: 100, color: Colors.blue),
        ), 

所以在你的情况下，这里是代码

Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Align(
          alignment: Alignment.topLeft,
          child: Container(width: 100, height: 100, color: Colors.blue),
        ),
        Container(width: 100, height: 500, color: Colors.red),
        Align(
          alignment: Alignment.center,
          child: Container(width: 100, height: 300, color: Colors.green),
        ),
        Align(
          alignment: Alignment.bottomCenter,
          child: Container(width: 100, height: 200, color: Colors.yellow),
        ),
        Container(width: 100, height: 100, color: Colors.purple),
      ],
    );

结果将是这个

\

在这里阅读更多关于它的对齐