推荐答案

这是简单，只要给你的TabBar一个TileLayout。你不必子类的TabBar，你甚至不必创建一个自定义外观类的。只要做到这一点：

It's as simple as giving your TabBar a TileLayout. You don't have to subclass TabBar and you don't even have to create a custom skin class for it. Just do this:

<s:TabBar dataProvider="{dp}" left="0" right="0">
    <s:layout>
        <s:TileLayout horizontalGap="-1" verticalGap="-1" 
                      requestedRowCount="2" />
    </s:layout>
</s:TabBar>

这将产生这样的：

Which will produce something like this:

您看到的TabBar下面的差距，是因为生产将TileLayout默认情况下，分配了一定数量的行。您可以通过设置覆盖这个 requestedRowCount 来行，你希望（在本例中2）的数量。

The gap below the TabBar you saw, is produced because TileLayout will by default allocate a certain number of rows. You can override this by setting the requestedRowCount to the number of rows you expect (2 in this example).

如果你希望它是真正的动态，你可以通过对比计算行所需数量的的TabBar总宽度的TileLayout的 columnWidth中，并结合所产生的数以 requestedRowCount 属性。

If you want it to be truly dynamic, you can calculate the required number of rows by comparing the TabBar's total width to the TileLayout's columnWidth, and bind the resulting number to the requestedRowCount property.