RefreshView

浏览示例

.NET Multi-platform App UI (.NET MAUI) RefreshView 是一个容器控件，它为可滚动内容提供下拉以刷新功能。 因此，RefreshView 的子级必须是可滚动控件，例如 ScrollView、CollectionView 或 ListView。

RefreshView 定义以下属性:

• Command，类型为 ICommand，在触发刷新时执行。
• CommandParameter，类型为 object，是传递给 Command 的参数。
• IsRefreshing，类型为 bool，指示当前 RefreshView 状态。
• RefreshColor，类型为 Color，刷新期间出现的圆形进度条的颜色。

这些属性由 BindableProperty 对象提供支持；也就是说，它们可以作为数据绑定的目标，并能进行样式设置。

注意

在 Windows 上，可使用平台特定功能设置 RefreshView 的拉取方向。 有关详细信息，请参阅 Windows 上的 RefreshView 拉取方向。

创建 RefreshView

若要将 RefreshView 添加到页面，需创建 RefreshView 对象并设置其 IsRefreshing 和 Command 属性。 然后将其子级设置为可滚动控件。

下面的示例展示了如何在 XAML 中实例化 RefreshView：

<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 将触发刷新可视化效果，并执行 Command 属性定义的 ICommand。

RefreshView 外观

除了 RefreshView 从 VisualElement 类继承的属性外，RefreshView 还定义了 RefreshColor 属性。 可以将此属性设置为定义刷新期间出现的圆形进度条的颜色：

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

以下 Android 屏幕截图展示了包含 RefreshColor 属性的 RefreshView：

此外，BackgroundColor 属性可以设置为表示圆形进度条的背景色的 Color。

注意

在 iOS 上，BackgroundColor 属性会设置包含圆形进度条的 UIView 的背景颜色。

禁用 RefreshView

应用可能会进入下拉以刷新不是有效操作的状态。 在这种情况下，可以通过将 RefreshView 的 IsEnabled 属性设置为 false 来对其进行禁用。 这会让用户无法触发下拉以刷新。

或者，在定义 Command 属性时，可以指定 ICommand 的 CanExecute 委托来启用或禁用该命令。