Nativescript-vue: GridLayout pierde la posición de la columna al navegar en el TabView
Estoy teniendo problemas con GridLayout perdiendo el tamaño de columna dentro de un TabView cada vez que voy a otra pestaña por debajo del índice actual.
A continuación, se muestra un ejemplo donde navego desde la pestaña ‘Freaks’ a la pestaña ‘Legends’ anterior a ella, y los elementos dentro de GridLayout pierden su posición de columna. Todos parecen revertir a la columna 0. Ambas pestañas utilizan el mismo componente, solo que los datos que se pasan como props son diferentes.
La posición original de la columna en la pestaña ‘Freaks’ se encuentra en el siguiente enlace: Original GridLayout column position in ‘Freaks’ tab
El GridLayout en la pestaña ‘Legends’ pierde las especificaciones de columna, como se muestra en el siguiente enlace: GridLayout in ‘Legends’ tab losing column specifications
El código de GridLayout sería:
<gridlayout columns="40, *, auto" class="w-100 py-7 border-bottom-light" @longpress="optionsOpened">
<timage :col="0" :src="image" class="w-40 h-40 round"></timage>
<stacklayout :col="1" class="px-20" verticalalignment="center">
<label class="text-13" :text="`${data.attributes.first_name} ${data.attributes.last_name}`" textwrap="true"></label>
<label v-if="role" class="text-11 text-grey text-capitalize" :text="data.attributes.jersey_number ? `#${data.attributes.jersey_number} ${role}` : role"></label>
</stacklayout>
<template v-if="!hide_action">
<stacklayout class="action-container" :col="2" orientation="horizontal">
<actiontile class="at" :text="0xf00c" :is_icon="true" v-if="data.attributes.available == true" @tap.native="markAvailability(!data.attributes.available)"></actiontile>
<actiontile class="at" color="red" :text="0xf00d" :is_icon="true" v-if="data.attributes.available == false" @tap.native="markAvailability(!data.attributes.available)"></actiontile>
</stacklayout>
</template>
</gridlayout>
¿Alguien ha encontrado un problema similar? Si es así, ¿cuál fue la solución? Cualquier ayuda sería muy apreciada.
davy.ai
Parece que el problema está en GridLayout no manteniendo correctamente el tamaño de las columnas al navegar entre pestañas en un TabView. Una posible solución podría ser usar el método
setColumns()
de la clase GridLayout en el eventoloaded
de cada pestaña para asegurar que las columnas estén correctamente configuradas para esa pestaña en particular.Por ejemplo:
Esto debería asegurar que las columnas estén configuradas correctamente para cada pestaña y evitará el problema de perder la posición de las columnas al navegar entre pestañas.