如何在MAUI的Entry控件中实现密码显示/隐藏功能

下面给你两种稳定可行的实现方式，你可以根据项目架构选择：

方式一：代码隐藏（适合简单页面） #

直接在页面后台写逻辑，不用复杂绑定：

先修改你的XAML，给控件加名称绑定点击事件：

<StackLayout>
    <Entry x:Name="PasswordEntry" Placeholder="PassWord" IsPassword="True" Text="{Binding Password}"/>
    <ImageButton x:Name="EyeButton" Source="eye_on" VerticalOptions="End" HorizontalOptions="End" Clicked="EyeButton_Clicked"/>
</StackLayout>

然后在对应页面的.cs文件里添加点击事件逻辑：

private void EyeButton_Clicked(object sender, EventArgs e)
{
    // 切换密码隐藏/可见状态
    PasswordEntry.IsPassword = !PasswordEntry.IsPassword;
    // 同步切换图标
    EyeButton.Source = PasswordEntry.IsPassword ? "eye_on" : "eye_off";
}

注意：确保项目资源里有eye_on和eye_off两张图标，Android端要把图片放在Resources/drawable文件夹并设置生成操作为Drawable；iOS端放在Resources文件夹，生成操作为BundleResource。

方式二：MVVM模式（推荐架构化项目） #

通过绑定属性和命令实现，完全解耦UI和逻辑：

第一步：ViewModel添加属性和命令 #

假设你的ViewModel继承了ObservableObject（CommunityToolkit.Mvvm库），添加以下内容：

private bool _isPasswordHidden = true;
// 控制密码是否隐藏
public bool IsPasswordHidden
{
    get => _isPasswordHidden;
    set => SetProperty(ref _isPasswordHidden, value);
}

private string _password;
public string Password
{
    get => _password;
    set => SetProperty(ref _password, value);
}

// 切换密码可见性的命令
public ICommand TogglePasswordVisibilityCommand { get; }

public YourViewModel()
{
    TogglePasswordVisibilityCommand = new Command(() =>
    {
        IsPasswordHidden = !IsPasswordHidden;
    });
}

第二步：添加两个转换器 #

需要两个值转换器来实现状态和UI的映射：

1. 反转布尔值转换器（把IsPasswordHidden转为Entry的IsPassword属性）

public class InverseBoolConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return !(bool)value;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return !(bool)value;
    }
}

2. 布尔值转图标转换器

public class BoolToEyeIconConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (bool)value ? "eye_on" : "eye_off";
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

第三步：修改XAML绑定 #

先在页面资源里注册转换器（注意替换命名空间）：

<ContentPage.Resources>
    <local:InverseBoolConverter x:Key="InverseBoolConverter"/>
    <local:BoolToEyeIconConverter x:Key="BoolToEyeIconConverter"/>
</ContentPage.Resources>

然后绑定控件属性和命令：

<StackLayout>
    <Entry Placeholder="PassWord" 
           IsPassword="{Binding IsPasswordHidden, Converter={StaticResource InverseBoolConverter}}" 
           Text="{Binding Password}"/>
    <ImageButton Source="{Binding IsPasswordHidden, Converter={StaticResource BoolToEyeIconConverter}}" 
                 VerticalOptions="End" 
                 HorizontalOptions="End"
                 Command="{Binding TogglePasswordVisibilityCommand}"/>
</StackLayout>

常见问题排查 #

• 点击按钮无反应：检查页面的BindingContext是否正确设置为ViewModel实例
• 图标不显示：核对图标文件名、存放路径和生成操作设置
• 绑定失效：确认ViewModel实现了INotifyPropertyChanged接口（继承ObservableObject自动实现）

内容的提问来源于stack exchange，提问作者MR ᴩ ʜ ᴏ ᴇ ɴ ɪ x