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

【问题标题】：How can I change the stack order of widgets inside a row widget?如何更改行小部件内小部件的堆栈顺序？
【发布时间】：2021-08-15 23:10:02
【问题描述】：

所以，我注意到当我添加一个用对齐的小部件包装的行小部件并将其对齐设置为alignment.center 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,
            ),
          )

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

感谢所有回复我想出了这个，它最适合我，只需使用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 <=====================================
        ),
      )

【讨论】：

【解决方案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);
    }

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

【讨论】：

【解决方案3】：

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)
}

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

【讨论】：