Pageview

Descrição do componente Page View e seus atributos

O que é?

O componente PageView é um container especializado em apresentar páginas que são exibidas na horizontal e podem conter um indicador de páginas. Essas páginas podem ser qualquer objeto server-driven.

A sua estrutura é representada como mostrado abaixo:

AtributoTipoObrigatórioDefinição
childrenList<ServerDrivenComponent>Define a lista de componentes visuais (server-driven) contidos naPageView<
contextContextDataÉo contexto contido neste Widget
onPageChangeList<Action>Lista de ação que é executada quando a pagina selecionada é alterada
currentPageIntIdentificador de qual pagina está selecionada
showArrowBooleanEsse atributo é especifico para plataforma web. Ele habilita setas para mudança de página.

Como usar?

No exemplo abaixo segue um PageView contendo três páginas onde cada uma delas tem um Text que é definido por Contexto. Toda vez que há mudança de página o contexto é redefinido.

Screen(
        child = Container(
            context = ContextData("currentTab", 0),
            children = listOf(
                TabBar(
                    onTabSelection = listOf(
                        SetContext(
                            "currentTab",
                            "@{onTabSelection}"
                        )
                    ),
                    currentTab = expressionOf("@{currentTab}"),
                    items = listOf(
                        TabBarItem("Tab 1"),
                        TabBarItem("Tab 2")
                    ),
                    styleId = "TabBarStyle"
                ),
                PageView(
                    currentPage = expressionOf("@{currentTab}"),
                    onPageChange = listOf(SetContext(
                        "currentTab",
                        "@{onPageChange}"
                    )),
                    children = listOf(
                        Text(
                            "Tab 1"
                        ),
                        Text(
                            "Tab 2"
                        )
                    )
                )
            )
        )
    )