Nativescript：如何在网格 flexbox 中使标签不超过其容器的宽度？

Question

我正在使用 NativeScript 6.4.1 和 Angular 8 编写应用程序。

在我的应用程序主页上，我需要有一个按钮列表，按钮下方有一个标签。

我希望容纳按钮的容器和所有文本的宽度都相同。如果文本太长，它将转到下一行而不是扩展父容器的大小。

我曾尝试为此目的使用 FlexboxLayout，但我注意到父容器只是展开： https://play.nativescript.org/?template=play-ng&id=jbpqMk&v=5

我想我在布局上也需要一些灵活性；也许能够配置它的 2 列或 3 列。

使用 GridLayout 会更好吗？

这是一个代码片段：

home.html

<FlexboxLayout backgroundColor="pink" flexWrap="wrap" justifyContent="center">
    <ns-home-button *ngFor="let n of list" name="{{ n.name }}"></ns-home-button>
</FlexboxLayout>

期望的结果：

当前结果：

Answer 1

有趣的是，您在演示中显示的单元格已根据您的流程规范正确对齐。使用 GridLayout 是可能，但不是很理想。 GridLayout 需要计算和指定它的所有行，这很烦人，而且它还会迫使它的子项适应它，而不是基于子项展开（比如 FlexboxLayout 或 StackLayout).

相反，只需为每个项目设置宽度。最简单的两种方法是包装每个元素：

<FlexboxLayout backgroundColor="pink" flexWrap="wrap" justifyContent="center">
    <StackLayout width="33%" *ngFor="let n of list">
        <ns-home-button name="{{ n.name }}"></ns-home-button>
    </StackLayout>
</FlexboxLayout>

或通过修改组件规格：

<FlexboxLayout backgroundColor="pink" flexWrap="wrap" justifyContent="center">
    <ns-home-button width="33%" *ngFor="let n of list" name="{{ n.name }}"></ns-home-button>
</FlexboxLayout>

    @Input() width: string;

<FlexboxLayout [width]="width" ...>
    ...
</FlexboxLayout>

Nativescript：如何在网格 flexbox 中使标签不超过其容器的宽度？

Nativescript: How to make label no longer than the width of its container in a grid flexbox?

css

layout

flexbox

nativescript

angular