es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Nativescript-vue: GridLayout pierde la posición de la columna al navegar en el TabView

31 Jul, 2023 Programación

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.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    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 evento loaded de cada pestaña para asegurar que las columnas estén correctamente configuradas para esa pestaña en particular.

    Por ejemplo:

    <gridlayout :columns="columnSpecs" @loaded="setGridLayoutColumns">
  ...
</gridlayout>

...

// En la sección de métodos del componente
data() {
  return {
    columnSpecs: "40, *, auto"
  }
},
methods: {
  setGridLayoutColumns(args) {
    const gridLayout = args.object;
    const columnSpecs = this.columnSpecs;
    gridLayout.setColumns(columnSpecs);
  }
}

    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.

Comments are closed.