Instancias de paquete anidadas

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

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

Las instancias de paquetes pueden agregarse como lo haría normalmente agregando 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 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 proporcionar un de salida al elemento superior, que se pasa a través de una instancia de la el componente de código del paquete.

Si la instancia anidada está presente en múltiples variantes de Figma en el elemento 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 este 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 elemento title de la instancia de Description Card parámetro.

  • reservation-text, que expone la instancia de Description Card Parámetro chip-text.

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

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, hemos seleccionó la instancia Description Card y expuso los details parámetro.

   

3. En el panel de la derecha del complemento Relay for Figma, puedes seleccionar otro parámetro o cambiarle el nombre para cambiar cómo se lo llama el código generado. En este ejemplo, se cambia el nombre del parámetro a summary, que aún hace referencia al parámetro details de nuestra política anidada instancia.

   

Cuando importas un componente superior (en este caso, Reservation Card) en En 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, el valor nuevo se descarta 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" por "Reserva obligatoria":

Si Chip no tiene un parámetro para su texto, en el código generado, el El chip de Description Card continúa diciendo "Texto del chip", no "Se requiere reserva".

@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 código generado, DescriptionCard llama a Chip con el mensaje "Se requiere reserva" 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, luego, en el código generado, DescriptionCard tiene un subchipText y llama a Chip con subchipText como el valor de chipText parámetro:

@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 "Reserva obligatoria" 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

• El componente anidado con las mismas propiedades de variante que el componente superior no funciona. compilación
• 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