Question

所以，我注意到当我添加一个用对齐小部件包裹的行小部件并将其对齐方式设置为alignment.centre right，然后在行小部件内添加2个容器小部件时，第二个小部件总是在第一个上方. 有没有办法可以更改小部件相互重叠的顺序？我正在使用 this 包装以这种方式堆叠容器小部件

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 属性是一个列表，因此您可以使用所需的小部件生成一个列表并添加一个 .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 上找到那个包的源代码，这就是 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 <=====================================
        ),
      )

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

3 个答案: