MAUI中如何根据WiFi连接状态自动切换图片源？

问题核心原因 #

1. 仅在按钮点击时检查一次网络状态，未监听实时网络变化
2. profiles变量是ViewModel初始化时的快照数据，不会自动同步当前网络状态
3. 未确保图片资源的加载路径和构建配置正确

解决方案步骤 #

1. 订阅网络状态变化事件

在ViewModel中订阅Connectivity.ConnectivityChanged事件，实现网络状态的实时监听，无需手动点击按钮触发更新。

2. 修正网络状态检查逻辑

每次检查网络时，实时获取当前的连接配置文件，而非使用初始化时的旧数据。

3. 确保图片资源配置正确

将wificonnected.png、wifidisconnected.png放入项目的Resources/Images文件夹，右键图片设置Build Action为MauiImage。

4. 优化绑定逻辑

去掉冗余的HasWifi属性，直接绑定Wifi字段（[ObservableProperty]已自动生成属性变更通知）。

修改后的ViewModel代码 #

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using Microsoft.Maui.Networking;

namespace DisplayV3.ViewModels;

public partial class HomeViewModel : ObservableObject, IDisposable
{
    [ObservableProperty]
    string wifi;

    public HomeViewModel()
    {
        // 初始化时先检查一次网络状态
        UpdateWifiState();
        // 订阅网络变化事件
        Connectivity.Current.ConnectivityChanged += OnConnectivityChanged;
    }

    private void OnConnectivityChanged(object sender, ConnectivityChangedEventArgs e)
    {
        // 网络状态变化时自动更新图片路径
        UpdateWifiState();
    }

    private void UpdateWifiState()
    {
        var currentProfiles = Connectivity.Current.ConnectionProfiles;
        Wifi = currentProfiles.Contains(ConnectionProfile.WiFi) 
            ? "wificonnected.png" 
            : "wifidisconnected.png";
    }

    [RelayCommand]
    async void CheckInternet()
    {
        // 保留手动检查功能
        UpdateWifiState();
        await App.Current.MainPage.DisplayAlert("当前WiFi状态", Wifi, "确定");
    }

    // 取消事件订阅，避免内存泄漏
    public void Dispose()
    {
        Connectivity.Current.ConnectivityChanged -= OnConnectivityChanged;
    }

    [ObservableProperty]
    [NotifyPropertyChangedFor(nameof(FullName))]
    string firstName;

    [ObservableProperty]
    [NotifyPropertyChangedFor(nameof(FullName))]
    string lastName;

    public string FullName => $"{FirstName}{LastName}";
}

修改后的页面代码（优化绑定） #

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:viewmodel="clr-namespace:DisplayV3.ViewModels"
             x:DataType="viewmodel:HomeViewModel"
             x:Class="DisplayV3.Pages.Home"
             Title="Home"
             Disappearing="ContentPage_Disappearing">
   
    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Entry Placeholder="First name"
                   Text="{Binding FirstName}"/>
            
            <Entry Placeholder="Last name" 
                   Text="{Binding LastName}"/>

            <Label
                Text="{Binding FullName}" 
                HorizontalOptions="Center"/>
            
            <!-- 直接绑定Wifi属性 -->
            <Image
                Source="{Binding Wifi}"
                HeightRequest="200"
                HorizontalOptions="Center" />
            
            <Label
                Text="{Binding Wifi}" 
                HorizontalOptions="Center"/>

            <Button
                Command="{Binding CheckInternetCommand}"
                Text="检查WiFi状态"
                HorizontalOptions="Center" />
            
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

页面后台代码（处理资源释放） #

在Home页面后台添加代码，确保页面消失时释放ViewModel资源：

using DisplayV3.ViewModels;

namespace DisplayV3.Pages;

public partial class Home : ContentPage
{
    private HomeViewModel _viewModel;

    public Home(HomeViewModel viewModel)
    {
        InitializeComponent();
        _viewModel = viewModel;
        BindingContext = _viewModel;
    }

    private void ContentPage_Disappearing(object sender, EventArgs e)
    {
        _viewModel.Dispose();
    }
}

关键说明 #

• 实时监听：通过ConnectivityChanged事件实现网络状态变化时自动更新图片
• 实时状态获取：每次检查网络都调用Connectivity.Current.ConnectionProfiles获取最新数据
• 资源配置：图片必须设置为MauiImage才能被MAUI正确识别加载
• 内存防护：实现IDisposable接口取消事件订阅，避免页面销毁后出现内存泄漏

内容的提问来源于stack exchange，提问作者MartinAlmqvist