RefreshView

Navegue pelo exemplo

O .NET Multi-platform App UI (.NET MAUI) RefreshView é um controle de contêiner que fornece funcionalidade pull to refresh para conteúdo rolável. Portanto, o filho de um deve ser um RefreshView controle rolável, como ScrollView, CollectionViewou ListView.

RefreshView define as propriedades a seguir:

• Command, do tipo ICommand, que é executado quando uma atualização é acionada.
• CommandParameter, do tipo object, que é o parâmetro passado para Command.
• IsRefreshing, do tipo bool, que indica o estado atual do RefreshView.
• RefreshColor, do tipo Color, a cor do círculo de progresso que aparece durante a atualização.

Essas propriedades são apoiadas por BindableProperty objetos, o que significa que elas podem ser alvos de associações de dados e estilizadas.

Observação

No Windows, a direção de pull de um RefreshView pode ser definida com uma plataforma específica. Para obter mais informações, consulte RefreshView pull direction on Windows.

Criar um RefreshView

Para adicionar um a uma página, crie um RefreshViewRefreshView objeto e defina suas IsRefreshing e Command propriedades. Em seguida, defina seu filho para um controle rolável.

O exemplo a seguir mostra como instanciar um RefreshView em XAML:

<RefreshView IsRefreshing="{Binding IsRefreshing}"
             Command="{Binding RefreshCommand}">
    <ScrollView>
        <FlexLayout Direction="Row"
                    Wrap="Wrap"
                    AlignItems="Center"
                    AlignContent="Center"
                    BindableLayout.ItemsSource="{Binding Items}"
                    BindableLayout.ItemTemplate="{StaticResource ColorItemTemplate}" />
    </ScrollView>
</RefreshView>

A RefreshView também pode ser criado em código:

RefreshView refreshView = new RefreshView();
ICommand refreshCommand = new Command(() =>
{
    // IsRefreshing is true
    // Refresh data here
    refreshView.IsRefreshing = false;
});
refreshView.Command = refreshCommand;

ScrollView scrollView = new ScrollView();
FlexLayout flexLayout = new FlexLayout { ... };
scrollView.Content = flexLayout;
refreshView.Content = scrollView;

Neste exemplo, o RefreshView fornece a funcionalidade pull para atualizar para um filho cujo filho é um FlexLayoutScrollView arquivo . O FlexLayout usa um layout vinculável para gerar seu conteúdo vinculando a uma coleção de itens e define a aparência de cada item com um DataTemplatearquivo . Para obter mais informações sobre layouts vinculáveis, consulte Layout vinculável.

O valor da RefreshView.IsRefreshing propriedade indica o estado atual do RefreshView. Quando uma atualização é acionada pelo usuário, essa propriedade será automaticamente transferida para true. Quando a atualização for concluída, você deverá redefinir a propriedade para false.

Quando o usuário inicia uma atualização, o definido pela propriedade é executado, o ICommandCommand que deve atualizar os itens que estão sendo exibidos. Uma visualização de atualização é mostrada enquanto a atualização ocorre, que consiste em um círculo de progresso animado. A captura de tela a seguir mostra o círculo de progresso no iOS:

Observação

Definir manualmente a propriedade como true acionará a IsRefreshing visualização de atualização e executará o ICommand definido pela Command propriedade.

Aparência da RefreshView

Além das propriedades que RefreshView herda da VisualElement classe, RefreshView também define a RefreshColor propriedade. Essa propriedade pode ser definida para definir a cor do círculo de progresso que aparece durante a atualização:

<RefreshView RefreshColor="Teal"
             ... />

A seguinte captura de tela do Android mostra um RefreshView com a RefreshColor propriedade:

Além disso, a propriedade pode ser definida como a que representa a BackgroundColorColor cor de plano de fundo do círculo de progresso.

Observação

No iOS, a propriedade define a BackgroundColor cor do plano de fundo que contém o UIView círculo de progresso.

Desativar um RefreshView

Um aplicativo pode entrar em um estado em que pull to refresh não é uma operação válida. Nesses casos, o pode ser desabilitado RefreshView definindo sua IsEnabled propriedade como false. Isso impedirá que os usuários possam acionar pull para atualizar.

Como alternativa, ao definir a Command propriedade, o delegado do ICommand pode ser especificado para habilitar ou desabilitar o CanExecute comando.