Instancias de paquete anidadas

Los paquetes de IU pueden contener (o "anidar") instancias de otros paquetes de IU, con compatibilidad con interactividad y contenido dinámico en cada nivel; todo importado automáticamente mediante el complemento Relay for Android Studio.

Cómo agregar instancias anidadas y exponer parámetros anidados

Las instancias de paquete se pueden agregar como lo harías normalmente en agregar instancias de componentes en Figma.

Una vez que agregas una instancia de paquete anidado a un paquete, puedes agregar contenido y parámetros de interacción basados en los parámetros de instancia anidados, al igual que las propiedades de cualquier otra capa:

• Selecciona la capa de instancia empaquetada.
• Haz clic en el botón + para agregar un parámetro en la IU de Relay para Figma.
• Selecciona uno de los parámetros del paquete anidado.

El componente superior expone el parámetro o la interacción seleccionados, lo que forma una conexión entre el parámetro del paquete anidado y un parámetro nuevo agregado al componente superior. En el código generado, ahora puedes brindar un valor al elemento superior, que se pasa a través de una instancia del componente de código del paquete anidado.

Si la instancia anidada está presente en varias variantes de Figma en el componente superior, la IU agrupa instancias de variantes para habilitar la configuración individual.

De forma predeterminada, el componente superior no expone los parámetros de instancia del paquete anidado. En cambio, el código generado usa el valor que especificas en Figma, al igual que las anulaciones de parámetros normales.

Veamos el siguiente ejemplo:

• El paquete Chip tiene un parámetro de texto, chip-text.
• El paquete Description Card contiene un paquete Chip. Sus parámetros son los siguientes:
  • title
  • subchip-text, que expone el parámetro chip-text de la instancia del chip
  • sub-icon
  • details

• El paquete Reservation Card contiene un paquete Description Card. Sus parámetros son los siguientes:

  • hero-image

  • headline, que expone el parámetro title de la instancia de Description Card

  • reservation-text, que expone el parámetro chip-text de la instancia de Description Card

  • summary, que expone el parámetro details de la instancia de Description Card

Ten en cuenta que sub-icon es el único parámetro de Description Card que no está expuesto por Reservation Card. Por lo tanto, cada instancia de Reservation Card usa el ícono que Description Card proporciona de forma predeterminada.

Para exponer un parámetro de una instancia de componente anidado, haz lo siguiente:

1. Selecciona una instancia anidada de un paquete de IU que tenga parámetros. Puedes seleccionar la instancia directamente en el lienzo o en el complemento Relay for Figma, en Relay instances.

2. Haz clic en el botón + junto a Parameters. El menú muestra los parámetros de la instancia seleccionada. Selecciona un parámetro.

   Esto expone un parámetro de la instancia anidada. En este ejemplo, seleccionamos la instancia Description Card y expusimos el parámetro details.

   

3. En el panel del lado derecho del complemento Relay for Figma, puedes seleccionar un parámetro diferente o cambiarle el nombre para cambiar la forma en que se lo llama en el código generado. En este ejemplo, se cambia el nombre del parámetro por summary, que aún hace referencia al parámetro details de nuestra instancia anidada.

   

Cuando importas un componente superior (en este caso, Reservation Card) a Android Studio, todos los paquetes anidados se importan automáticamente (en este caso, Description Card y Chip). Cuando se genera el código, cada paquete genera su propia función de componibilidad.

El código generado para el ejemplo se ve de la siguiente manera:

ReservationCard.kt

..
import com.example.hellofigma.descriptioncard.DescriptionCard
...

@Composable
fun ReservationCard(
    modifier: Modifier = Modifier,
    heroImage: Painter,
    headline: String,
    summary: String,
    reservationText: String
) {
    ...
    DescriptionCard(
        title = headline,
        details = summary,
        subchipText = reservationText,
        subIcon = painterResource(R.drawable.reservation_card_bookmark_icon),
        modifier = modifier
    )
    ...
}

DescriptionCard.kt

...
import com.example.hellofigma.chip.Chip
...
@Composable
fun DescriptionCard(
    modifier: Modifier = Modifier,
    title: String,
    details: String,
    subchipText: String,
    subIcon: Painter
) {
   ...
   Chip(chipText = subchipText)
   ...
}

Cómo anular las propiedades de la instancia de paquete anidado

Si anulas el valor de una propiedad de instancia anidada en Figma, el valor nuevo solo se traduce en el código de Compose si el componente anidado agregó un parámetro para esa propiedad. De lo contrario, se descarta el valor nuevo y el valor original del componente anidado se usa en el código.

Veamos este ejemplo. El componente Description Card tiene una instancia del componente Chip. Agregamos una anulación a la instancia Chip cambiando el texto de "Chip Text" a "Reservation Required":

Si Chip no tiene un parámetro para su texto, entonces, en el código generado, el chip de la Description Card seguirá diciendo "Chip Text", no "Reservation Required".

@Composable
fun DescriptionCard(
    modifier: Modifier = Modifier,
) {
    ...
    Chip(
        modifier = modifier
        // No parameter available to override the chip's text
    )
    ...
}

@Composable
fun Chip(
    modifier: Modifier = Modifier,
) {...}

Si Chip tiene un parámetro para su texto, por ejemplo, chip-text, entonces, en el código generado, DescriptionCard llama a Chip con "Reservation Required" como el valor del parámetro chipText:

@Composable
fun DescriptionCard(
    modifier: Modifier = Modifier,
) {
    ...
    Chip(
        modifier = modifier,
        chipText = "Reservation Required"
    )
    ...
}

@Composable
fun Chip(
    modifier: Modifier = Modifier,
    chipText: String
) {...}

Si Description Card expone el parámetro chip-text de Chip como subchip-text, entonces, en el código generado, DescriptionCard tiene un parámetro subchipText y llama a Chip con subchipText como el valor del parámetro chipText:

@Composable
fun DescriptionCard(
    modifier: Modifier = Modifier,
    subchipText: String
) {
    ...
    Chip(
        modifier = modifier,
        chipText = subchipText
    )
    ...
}

@Composable
fun Chip(
    modifier: Modifier = Modifier,
    chipText: String
) {...}

Además, ahora que "Reservation Required" es el valor de un parámetro, aparece en el código generado solo en la vista previa de DescriptionCard.

@Preview
@Composable
private fun DescriptionCardPreview() {
    MaterialTheme {
        RelayContainer {
            DescriptionCard(
                subchipText = "Reservation Required",
                modifier = Modifier.rowWeight(1.0f).columnWeight(1.0f)
            )
        }
    }
}

Limitaciones

• No se puede compilar el componente anidado con las mismas propiedades de variante que el componente superior
• La actualización de recursos fuera de ui-packages no fuerza una compilación nueva

Recomendaciones para ti

• Nota: El texto del vínculo se muestra cuando JavaScript está desactivado
• Cómo asignar componentes al código existente
• Parámetros de contenido
• Conceptos básicos sobre el diseño de Compose