Flutter 颤振如何为行中的每个子对象进行多个交叉轴对齐

如何对行或列的每个子级进行不同的横轴对齐

返回行(
crossAxisAlignment:crossAxisAlignment.start，
儿童：[
容器（宽度：100，高度：100，颜色：Colors.blue），
容器（宽：100，高：500，颜色：彩色。红色），
容器（宽度：100，高度：300，颜色：Colors.green），
容器（宽度：100，高度：200，颜色：颜色。黄色），
容器（宽：100，高：100，颜色：颜色。紫色），
],
);

---

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

您可以通过使用

列

内部

行

小部件来实现这一点&通过指定

mainAxisAlignment

属性，您可以轻松地将任何框安排为开始、中心或结束

代码如下：

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

---

您可以使用

Align

类为每个小部件设置对齐

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

    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),
      ],
    );

结果就是这样

\

---

在这里阅读更多信息

Wrap小部件将相应地自动包装数据。这可用于创建具有不同图像和其他因素的旋转木马

      height: MediaQuery.of(context).size.height*0.6,
      child:
      Wrap(
        children: [
          Container(width: MediaQuery.of(context).size.width*0.5, height: MediaQuery.of(context).size.height*0.3,color: Colors.blue),
          Container(width: MediaQuery.of(context).size.width*0.5, height: MediaQuery.of(context).size.height*0.3,color: Colors.green),
          Container(width: MediaQuery.of(context).size.width*0.5, height: MediaQuery.of(context).size.height*0.3,color: Colors.orangeAccent),
          Container(width: MediaQuery.of(context).size.width*0.5, height: MediaQuery.of(context).size.height*0.3,color: Colors.pink),
        ],
      ),

    );

输出结果如下：

---

行小部件以水平数组显示其子项。