Question

我是一位自学成才的程序员，已经创建了一些具有角度的网站和应用程序，并且遇到了挑战，为iOS创建了NativeScript应用程序。

该应用程序正在生成一个锦标赛括号，我希望能够在按下按钮时放大/缩小该括号。

我创建的函数运行良好，但是元素以一种奇怪的方式移动，我不喜欢很多。

我尝试过缩放视图及其内容，并根据zoomState（通过单击按钮切换）来应用css类，并且我更喜欢css类的方法。

问题是，当我按下缩放键且视图未滚动到左上角时，所有元素都被推到左侧并合并在一起，这不是令人满意的视图。

元素布局基本上是这样的。

<ScrollView orientation="vertical">
  <ScrollView orientation="horizontal">
    <StackLayout orientation="horizontal" (pinch)="onPinchZoom($event)">
        <StackLayout *ngFor="let round of bracket; let last = last;" class="round-{{ round.round }}">
            <StackLayout *ngFor="let match of round.matches; let odd = odd; let even = even; let i = index">
                <GridLayout rows="auto,auto,auto,auto" columns="{{ bracketWidth.columns }}">
                    <!-- MATCH ELEMENT -->
                </GridLayout>
            </StackLayout>
        </StackLayout>
        <StackLayout class="{{ bracketWidth.isZoomed ? 'zoomed' : 'non-zoomed' }}">
            <!-- WINNER ELEMENT -->
        </StackLayout>
    </StackLayout>
</ScrollView>

按下按钮时，bracketWidth.isZoomed在TRUE / FALSE之间切换，这将更改类和每个元素的外观。如果垂直和水平ScrollView不在最左上角，则元素将全部合并为一行：（

non merged items: isZoomed = false merged items: isZoomed = false

ScreenRecording of on the issue

如果有人能帮助我解决这个问题，那会很棒，因为它使我发疯：（

最佳问候 Mattias Berggren

ScrollView和StackLayout的NativeScript Angular Scaling问题

0 个答案: