RefreshView

Обзор примера

Многоплатформенный пользовательский интерфейс приложения .NET (.NET MAUI) RefreshView — это элемент управления контейнером, предоставляющий возможность извлечения для обновления функций для прокручиваемого содержимого. Таким образом, дочерний элемент RefreshView должен быть прокручиваемым элементом управления, например ScrollView, CollectionViewили ListView.

RefreshView определяет следующие свойства:

• Commandтип ICommand, который выполняется при активации обновления.
• CommandParameter с типом object, который передается как параметр в Command.
• IsRefreshing, тип bool, указывающий текущее состояние RefreshViewобъекта .
• RefreshColor(тип Color) — цвет круга хода выполнения, который отображается во время обновления.

Эти свойства поддерживаются объектами BindableProperty, то есть эти свойства можно указывать в качестве целевых для привязки и стилизации данных.

Примечание.

В Windows направление RefreshView вытягивания можно задать с помощью конкретной платформы. Дополнительные сведения см RefreshView . в разделе "Направление извлечения" в Windows.

Создание класса RefreshView

Чтобы добавить RefreshView страницу, создайте RefreshView объект и задайте его IsRefreshing и Command свойства. Затем задайте дочерний элемент управления с прокруткой.

В следующем примере показано, как создать экземпляр в RefreshView 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>

Можно RefreshView также создать в коде:

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;

В этом примере RefreshView предоставляется возможность обновления функциональных возможностей, ScrollView дочерний объект которого является дочерним элементом FlexLayout. Использует FlexLayout привязываемый макет для создания содержимого путем привязки к коллекции элементов и задает внешний вид каждого элемента с DataTemplateпомощью . Дополнительные сведения о привязываемых макетах см. в разделе "Привязываемый макет".

Значение RefreshView.IsRefreshing свойства указывает текущее состояние RefreshViewобъекта. Когда обновление активируется пользователем, это свойство автоматически переходит в true. После завершения обновления необходимо сбросить свойство falseв значение .

Когда пользователь инициирует обновление, выполняется определенное Command свойством, ICommand которое должно обновить отображаемые элементы. Визуализация обновления отображается во время обновления, которая состоит из анимированного круга хода выполнения. На следующем снимок экрана показан круг хода выполнения в iOS:

Примечание.

Вручную присвойт IsRefreshing свойству активацию true визуализации обновления и будет выполняться определенное ICommand свойством Command .

Внешний вид RefreshView

Помимо свойств, наследующих RefreshView от VisualElement класса, RefreshView также определяет RefreshColor свойство. Это свойство можно задать для определения цвета круга хода выполнения, который отображается во время обновления:

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

На следующем снимка экранах Android показано RefreshView свойство:RefreshColor

Кроме того, BackgroundColor для свойства можно задать Color значение, представляющее цвет фона круга хода выполнения.

Примечание.

В iOS BackgroundColor свойство задает цвет фона UIView , содержащий круг хода выполнения.

Отключение RefreshView

Приложение может ввести состояние, в котором вытягивание для обновления не является допустимой операцией. В таких случаях RefreshView можно отключить, задав свойству IsEnabled значение false. Это приведет к тому, что пользователи смогут активировать вытягивание для обновления.

Кроме того, CanExecute при определении Command свойства делегат можно указать для ICommand включения или отключения команды.