Проблемы углового масштабирования NativeScript с ScrollView и StackLayout - PullRequest
Новая
       7

Проблемы углового масштабирования NativeScript с ScrollView и StackLayout

0 голосов
/ 26 февраля 2019

Я программист-самоучка, создал пару веб-сайтов и приложений с angular и взял на себя задачу создать приложение NativeScript для iOS.

Приложение генерирует турнирную сетку, которую яхотел бы иметь возможность увеличивать / уменьшать скобку при нажатии кнопки.

Созданная мною функция работает нормально, но элементы перемещаются странным образом, что мне очень не нравится.

Я пробовал как масштабировать представление и его содержимое, так и применять классы css в зависимости от zoomState (который переключается нажатием кнопки), и мне больше нравится подход к классу 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 переключается между ИСТИНА / ЛОЖЬ, что изменяет классы иd появление каждого элемента.Если вертикальное и горизонтальное представление прокрутки находится не в самом верхнем углу, все элементы объединяются в одну строку: (

не объединенные элементы: isZoomed = false объединенные элементы: isZoomed= false

ScreenRecording о проблеме

Было бы здорово, если бы кто-нибудь мог помочь мне с этим, потому что это сводит меня с ума: (

С наилучшими пожеланиями Маттиас Берггрен

...