Nativescript 将元素移动 50% 而不是 100%？

Question

我有一个简单的演示项目，其中：

<GridLayout>

    <StackLayout #myStack1 width="100" height="100" translateX="-50" backgroundColor="red" id="bbb">
    </StackLayout>

    <StackLayout #myStack2 width="100" height="100" translateX="50" backgroundColor="green" id="ccc">
    </StackLayout>
</GridLayout>

注意 width 和 height 是 100。

现在让我们将 marginTop 添加到 green 布局：

@ViewChild("myStack2") private myStack2: ElementRef;
ngOnInit(): void {
    this.myStack2.nativeElement.marginTop =100;
  }

但看看发生了什么：

它移动了 100 的 50%（框尺寸为 100）。这是为什么？

问题：

为什么会发生这种情况，我怎样才能将我的代码修复为实际的 marginTop 100？

我不是在 translateY=100 之后（它确实按预期显示 - 我是在 marginTop 的原因和解决方案之后）。

Answer 1

这实际上是基于您使用的布局结构的预期行为。问题是用于应用 marginTop 的 StackLayout 被拉伸（没有设置 verticalAlignment 意味着默认情况下布局将被拉伸）。要克服这个问题，只需应用 verticalAlignment 设置。

例如：

<GridLayout>
    <StackLayout  verticalAlignment="top" #myStack1 width="100" height="100" translateX="-50" backgroundColor="red" id="bbb">
    </StackLayout>

    <StackLayout verticalAlignment="top" #myStack2 width="100" height="100" translateX="50" backgroundColor="green" id="ccc">
    </StackLayout>
</GridLayout>

可以找到其他解决方案here

Nativescript 将元素移动 50% 而不是 100%？

Nativescript move element by 50% and not by 100%?

android

android-layout

nativescript

angular2-nativescript

angular