如何更改行小部件内小部件的堆栈顺序？

Question

所以，我注意到，当我添加一个用对齐的小部件包装的行小部件并将其 alignment 设置为 alignment.center 右侧，然后在行小部件内添加 2 个容器小部件时，第二个小部件始终位于第一个上方。 有没有办法可以更改小部件相互放置的顺序？ 我正在使用这个package 以这种方式堆叠容器小部件

child: Align(
            alignment: Alignment.centerRight,
            child: RowSuper(
              children: <Widget>[
                //
                // writing container ---------------------------------------
                Container(
                  color: Color(0xFF313340),
                  width: MediaQuery.of(context).size.width * 0.6026,
                  height: MediaQuery.of(context).size.width * 0.3739,
                ),
                //
                // image container -----------------------------------------
                Container(
                  color: Colors.red,
                  width: MediaQuery.of(context).size.width * 0.3864,
                  height: MediaQuery.of(context).size.width * 0.4843,
                ),
              ],
              innerDistance: -97.5,
            ),
          )

Answer 1

children 属性是一个列表，因此您可以使用所需的小部件生成一个列表并添加 a.reverse。

void main() {
   List<String> list= ["1", "2", "3", "4", "5"];

   print("Normal list: $list");
   // Result: Normal list: [1, 2, 3, 4, 5]

   print("Reversed list: ${list.reversed}");
   // Result: Reversed list: (5, 4, 3, 2, 1)
}

根据我对您的问题的理解，这就是答案

Answer 2

我们可以在 github 上找到 package 的源代码，这就是 RowSuper 布置子级的方式：

for (int i = 0; i < _children!.length; i++) {
      double width = maxChildWidth[i];

      BoxConstraints innerConstraints = BoxConstraints(
          maxHeight: constraints.maxHeight, maxWidth: width, minWidth: fill ? width : 0.0);

      var child = _children![i];
      child.layout(innerConstraints, parentUsesSize: true);
      maxChildHeight = max(maxChildHeight, child.size.height);
    }

它看起来很简单。 孩子们是按照他们提供的顺序排列的，所以我想你唯一的选择是改变你提供他们的顺序。

Answer 3

感谢所有回复我想出了这个，它最适合我通过简单地使用invert: true如果有人有同样的问题，这里是代码

child: Align(
        alignment: Alignment.centerRight,
        child: RowSuper(
          children: <Widget>[
            //
            // writing container ---------------------------------------
            Container(
              color: Color(0xFF313340),
              width: MediaQuery.of(context).size.width * 0.6026,
              height: MediaQuery.of(context).size.width * 0.3739,
            ),
            //
            // image container -----------------------------------------
            Container(
              color: Colors.red,
              width: MediaQuery.of(context).size.width * 0.3864,
              height: MediaQuery.of(context).size.width * 0.4843,
            ),
          ],
          innerDistance: -97.5,
          invert: true, //The line that was added <=====================================
        ),
      )