我可以反转 Flutter Wrap 小部件的运行顺序吗？

Question

我正在尝试使用Wrap 小部件编写一个简单的布局。我想知道是否有任何方法可以将“溢出”元素放置在第一次运行而不是最后一次运行中。例如，假设我有一个包含 7 个元素的水平 Wrap，并且每次运行可以容纳四个元素。我不想让最后三个元素在最后出现运行（行），我希望只有前三个元素在开始时出现运行（行）。

我可以在不使用其他布局小部件的情况下实现这一目标吗？

另外，有没有办法强制在包装中的某个元素之后开始新的运行？例如，如果我总是想要第一个元素在它自己的行上？

Answer 1

有一个名为 textDirection 的属性，这很奇怪，它不仅控制文本，还控制小部件。

所以你有一个像这样的项目的订单

A, B, C, D|

E, F      |

你添加

Wrap(
   ...
      textDirection: TextDirection.rtl,
   ...)

物品变成

D, C, B, A|

      F, E|

Medium 中的这篇 [文章][1] 对 wrap 小部件的可能性进行了很好的解释。

编辑：

Wrap 开始从同一个方向“换行”，所以像这样的布局

A, B      |
C, D, E, F|

确实，仅使用 wrap 是不可能的。

但是。如果您改为使用行和列布局，您也许可以做到这一点。额外的逻辑是必需的，但结果应该是可能的。由于没有关于如何实现布局的代码，我会尽力解释它。

List<Widget> widgetList = [WidgetA,WidgetB,WidgetC,WidgetD,WidgetE,WidgetF]; //The widget list A,B,C,D,E,F...  Each widget SHOULD be wrapped in Expanded(), and have a fixed height to avoid infinity height
List<Widget> reversedList = List.from(widgetList.reversed); //F,E,D,C,B,A
//We need to split this in sub list of 4 items each, I will use Spacers()  on the last sublist if it's not 4, to keep a nice layout
List<List> subLists=[];
for (var i = 0; i < reversedList.length; i +=4) {
    bool isLastSublist = i+4 > reversedList.length ;
    List subListToAdd = reversedList.sublist(i, isLastSublist ? reversedList.length : i + 4);
    //When the lengthis less than 4 we add spacers to maintain the layout spacing
    if(subListToAdd.length>4){
        for(var o = subListToAdd.length;o<=4;o++){
            sublistToAdd.add(Spacer());
        }
    }
    subLists.add(subListToAdd); 

}

//in other part of your code
//...

Column(
...
verticalDirection: VerticalDirection.up,
children:List<Widget>.generate(subLists.length,(int index) => Row(children:subLists[index]))
...
)

我现在不在我的flutter pc中，所以我无法测试它，但是概念在那里，代码可以优化 [1]：https://medium.com/flutter-community/flutter-wrap-widget-e1ee0b005b16