AsyncImage

在 UI 线程之外从 URI 加载的图片，带加载中与回退内容，即 uikit:AsyncImage。

示例可交互

AsyncImage — Avalonia UIKit

Live demo unavailable

<StackPanel Orientation="Horizontal" Spacing="16" HorizontalAlignment="Left">
  <uikit:AsyncImage Classes="rounded-lg" Width="192" Height="96"
                    Source="avares://AvaloniaUIKit.Demos/Assets/wide-192x96.png" />
  <uikit:AsyncImage Classes="rounded-lg" Width="96" Height="96" Stretch="UniformToFill"
                    Source="avares://AvaloniaUIKit.Demos/Assets/wide-192x96.png" />
  <uikit:AsyncImage Width="96" Height="96" Source="avares://AvaloniaUIKit.Demos/Assets/missing.png">
    <uikit:AsyncImage.Loading>
      <Border Background="{DynamicResource UIKit.Muted}" CornerRadius="8" />
    </uikit:AsyncImage.Loading>
    <uikit:AsyncImage.Fallback>
      <Border Background="{DynamicResource UIKit.Muted}" CornerRadius="8">
        <StackPanel Spacing="4" HorizontalAlignment="Center" VerticalAlignment="Center">
          <uikit:Icon Kind="CircleX" HorizontalAlignment="Center" Foreground="{DynamicResource UIKit.MutedForeground}" />
          <TextBlock Text="Unavailable" FontSize="12" Foreground="{DynamicResource UIKit.MutedForeground}" />
        </StackPanel>
      </Border>
    </uikit:AsyncImage.Fallback>
  </uikit:AsyncImage>
</StackPanel>

用法

uikit:AsyncImage 在 UI 线程之外加载其 Source（http、https、file 或 avares URI），并像 Image 那样绘制图片：Stretch、StretchDirection 以及 rounded、rounded-lg、rounded-full 样式类的行为都相同。图片加载期间，控件保持自身尺寸，不绘制任何内容；如果加载在 200ms 后仍在进行，它会显示 Loading 内容，因此快速加载不会让它闪现。加载失败时，它显示 Fallback 内容。伪类 :loading、:loaded 与 :failed 跟随加载状态。

默认加载器（ImageLoader.Default）会为每个显示同一来源的 AsyncImage 保留该来源的图片；Remove 与 Clear 会遗忘图片，而加载失败的来源会在下一次遇到该来源的图片时重试。把 Loader 设为你自己的 IImageLoader，即可用其他方式加载图片。SVG 与动画图片不会被解码。

在演示中，前两张图片从应用的资源加载；第三张的来源缺失，因此显示其回退内容。

AsyncImage

#用法

用法