RefreshView

瀏覽範例

.NET 多平台應用程式介面（.NET MAUI） RefreshView 是一個容器控制，提供可捲動內容的拉取刷新功能。 因此，的 RefreshView 子節點必須是可滾動的控制項，例如 ScrollView、 CollectionView或 ListView。

RefreshView 定義下列屬性：

• Command，型別為 ICommand，當刷新觸發時執行。
• CommandParameter，屬於object類型，是傳遞給Command的參數。
• IsRefreshEnabled，型別 bool為 ，表示是否啟用拉取以刷新。
• 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 上的進度圈：

備註

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

RefreshView 外觀

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

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

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

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

備註

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

停用 RefreshView

應用程式可能會進入一種狀態，使得下拉更新不是一個有效的操作。 選擇符合你想要行為的選項。

用 IsRefreshEnabled 來關閉只拉取刷新

IsRefreshEnabled 關閉拉取刷新手勢，同時保持兒童內容的互動性：

<RefreshView IsRefreshEnabled="{Binding CanRefresh}"
             Command="{Binding RefreshCommand}">
    <!-- Login form remains usable -->
    <ScrollView>
        <StackLayout>
            <Entry Placeholder="Username" />
            <Entry Placeholder="Password" IsPassword="true" />
            <Button Text="Login" />
        </StackLayout>
    </ScrollView>
</RefreshView>

用 IsEnabled 來停用整個控制

IsEnabled 會停用 RefreshView 及其所有子內容：

<RefreshView IsEnabled="false"
             Command="{Binding RefreshCommand}">
    <!-- Login form will be unusable when IsEnabled is false -->
    <ScrollView>
        <StackLayout>
            <Entry Placeholder="Username" />
            <Entry Placeholder="Password" IsPassword="true" />
            <Button Text="Login" />
        </StackLayout>
    </ScrollView>
</RefreshView>

用 Command.CanExecute 來控制指令執行及拉取以刷新

在定義屬性 Command 時， CanExecute 代理 ICommand 可以啟用或停用指令執行：

在 .NET 10 及以後版本中，Command.CanExecute也對有效IsRefreshEnabled價值有所貢獻。 因此，當 CanExecute 回傳 false 時，下拉重新整理手勢將被停用（即使 IsRefreshEnabled 是 true）。

bool canRefresh = true;

RefreshView refreshView = new RefreshView();
Command refreshCommand = new Command(
    execute: () =>
    {
        // Refresh data here.
    },
    canExecute: () => canRefresh);

refreshView.Command = refreshCommand;

// Later, disable refresh command execution.
canRefresh = false;
refreshCommand.ChangeCanExecute();