Nativescript + Angular：flexShrink=“1” 似乎不适用于 iOS。我做错了吗？

Posted 2023-04-13

【中文标题】Nativescript + Angular：flexShrink=“1” 似乎不适用于 iOS。我做错了吗？

【英文标题】：Nativescript + Angular: flexShrink=“1” doesn’t seems to work on iOS. Do I do something wrong?

【发布时间】：2019-06-04 12:29:57

【问题描述】：

<FlexboxLayout style=“width: 200; background-color: red;“>
   <Label text=“AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA”
       flexShrink=“1" style=“background-color: blue;“></Label>
   <Label text=“BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB”
       flexShrink=“1" style=“background-color: green;“></Label>
   <Label text=“CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC”
       flexShrink=“1" style=“background-color: yellow;“></Label>
</FlexboxLayout>

这应该截断所有 3 个标签并显示所有标签。它适用于 android，但在 ios 上标签不会被截断，在这种情况下我们只看到第一个。

我错了？ 这是一个错误？ 有什么诀窍可以让它发挥作用吗？ （StackLayout/GridLayout/DockLayout 不符合我的需求）

tns-core-modules: 5.1.1

https://play.nativescript.org/?template=play-ng&id=RR4zDg

https://github.com/NativeScript/NativeScript/issues/6781

【问题讨论】：

这似乎是一个错误，但我并不完全确定。 GridLayout 应该会在两个平台上为您提供预期的输出。

GridLayout 的问题是colum "auto" 不尊重全局GridLayout 宽度。 <GridLayout columns="20, auto, auto" style="width: 200; background-color: red;"> <Label col="0" text="AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" style="background-color: blue;"></Label> <Label col="1" text="BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB" style="background-color: green;"></Label> <Label col="2" text="CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC" style="background-color: yellow;"></Label> </GridLayout> 所以，根据我的需要，它并不比 Flexbox 更好。

这实际上是 auto 的预期结果，每个孩子都在占用它想要的空间，你应该使用* 来平均分配孩子之间的空间。

是的，但我不希望“BB”占据与“CCCCCCCCCCCCCC”相同的位置 ;-)（动态内容）我需要一个有效的 FlexboxLayout ;-)

然后尝试在FlexboxLayout 上设置align-items: center;。如果您仍想将标签拉伸到其父级，请将标签的高度设置为 100%。

【参考方案1】：

可以通过添加 "align-items: center;" 绕过该错误到 FlexboxLayout（感谢 Manoj）

<FlexboxLayout style="width: 200; background-color: red; align-items: center;">
    <Label text="AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"
        flexShrink="1" style="background-color: blue;"></Label>
    <Label text="BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB"
        flexShrink="1" style="background-color: green;"></Label>
    <Label text="CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC"
        flexShrink="1" style="background-color: yellow;"></Label>
</FlexboxLayout>

您可以在此处关注问题：https://github.com/NativeScript/NativeScript/issues/6781