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

要將 a RefreshView 加入頁面，建立RefreshView一個物件並設定其IsRefreshingCommand屬性。 然後將其子項設置為可滾動的控制項。

以下範例說明如何在 XAML 中實例化 a RefreshView ：

<ContentPage ...
             xmlns:local="clr-namespace:RefreshViewDemo"
             x:DataType="local:MainPageViewModel">
    <ContentPage.BindingContext>
        <local:MainPageViewModel />
    </ContentPage.BindingContext>             
    <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>
</ContentPage>

您也可以在程式代碼中建立 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。

當使用者啟動刷新時，會執行由 ICommand 屬性定義的 Command ，這應該會刷新顯示的項目。 刷新過程中會顯示一個動態進度圈的視覺化畫面。 以下截圖顯示 iOS 上的進度圈：

刷新資料的 RefreshView 截圖。

備註

手動將屬性設定IsRefreshing至true這將觸發重新整理視覺化的動作，並執行由Command屬性定義的ICommand。

RefreshView 外觀

除了從VisualElement類別繼承的屬性外，RefreshView還定義了RefreshColor屬性。 此屬性可設定為定義刷新時出現的進度圓圈顏色：

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

以下 Android 截圖顯示具有屬性RefreshColor的RefreshView：

一張帶有青綠色進度圈的截圖 RefreshView 。

此外，BackgroundColor 屬性可以設定為用以代表進度圈背景色的 Color。

備註

在 iOS 上，屬性 BackgroundColor 設定包含進度圈的 UIView 背景色。

停用 RefreshView

應用程式可能會進入一種狀態，使得下拉更新不是一個有效的操作。 在這種情況下，RefreshView 可以藉由將其 IsEnabled 屬性設定為 false來停用。 這樣會防止使用者觸發下拉刷新功能。

或者，在定義 Command 屬性時，可以指定 ICommand 的 CanExecute 代理來啟用或停用該指令。

  • Last updated on