MAUI Android浅色模式下搜索图标无法显示，求技术支持

问题现象 #

MAUI Android应用在浅色模式下，SearchBar左侧的搜索图标完全不可见，仅能显示"Search"占位符。

代码片段 #

<SearchBar WidthRequest="{Binding Source={x:Static local:App.screenWidth}}"  
           ios:SearchBar.SearchBarStyle="Default"  
           x:Name="SearchBar"  
           TextChanged="SearchBar_TextChanged" 
           SearchCommand="{Binding SearchCommand}" 
           SearchCommandParameter="{Binding Text, Source={x:Reference SearchBar}}" 
           Placeholder="Search">

    <SearchBar.CancelButtonColor>
        <OnPlatform x:TypeArguments="Color">
            <On Platform="iOS" Value="White"/>
            <On Platform="Android" Value="White"/>
        </OnPlatform>
    </SearchBar.CancelButtonColor>
    <SearchBar.PlaceholderColor>
        <OnPlatform x:TypeArguments="Color">
            <On Platform="Android" Value="White"/>
            <On Platform="iOS" Value="Gray"/>
        </OnPlatform>
    </SearchBar.PlaceholderColor>
    <SearchBar.Margin>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="Android" Value="0, 6 , 0, 6"/>
            <On Platform="iOS" Value="0,0,0,0"/>
        </OnPlatform>
    </SearchBar.Margin>
    
    <SearchBar.TextColor>
        <OnPlatform x:TypeArguments="Color">
            <On Platform="Android" Value="White" />
            <On Platform="iOS" Value="White" />
        </OnPlatform>
    </SearchBar.TextColor>
    <SearchBar.BackgroundColor>
        <OnPlatform x:TypeArguments="Color">
            <On Platform="Android" Value="{StaticResource 00dp}" />
            <On Platform="iOS" Value="{StaticResource 00dp}" />
        </OnPlatform>
    </SearchBar.BackgroundColor>
</SearchBar>

问题分析 #

1. 颜色对比度不足：Android平台SearchBar的默认搜索图标颜色会继承系统主题色，你当前将Android端的PlaceholderColor、TextColor都设为白色，且BackgroundColor使用00dp静态资源——如果该资源在浅色模式下是白色/浅色系，白色图标就会和背景融为一体，导致不可见。
2. 未适配主题切换：代码没有针对浅色/深色模式分别配置颜色，强制统一为白色，在浅色模式下自然无法显示。

修复方案 #

方案1：用VisualStateManager适配主题 #

直接在XAML中通过视觉状态切换颜色，适配不同主题：

<SearchBar WidthRequest="{Binding Source={x:Static local:App.screenWidth}}"  
           ios:SearchBar.SearchBarStyle="Default"  
           x:Name="SearchBar"  
           TextChanged="SearchBar_TextChanged" 
           SearchCommand="{Binding SearchCommand}" 
           SearchCommandParameter="{Binding Text, Source={x:Reference SearchBar}}" 
           Placeholder="Search">

    <SearchBar.CancelButtonColor>
        <OnPlatform x:TypeArguments="Color">
            <On Platform="iOS" Value="White"/>
            <On Platform="Android" Value="White"/>
        </OnPlatform>
    </SearchBar.CancelButtonColor>
    <SearchBar.Margin>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="Android" Value="0, 6 , 0, 6"/>
            <On Platform="iOS" Value="0,0,0,0"/>
        </OnPlatform>
    </SearchBar.Margin>
    
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="ThemeStates">
            <!-- 浅色模式 -->
            <VisualState x:Name="Light">
                <VisualState.Setters>
                    <Setter Property="PlaceholderColor" Value="Gray"/>
                    <Setter Property="TextColor" Value="Black"/>
                    <Setter Property="CancelButtonColor" Value="Black"/>
                </VisualState.Setters>
            </VisualState>
            <!-- 深色模式 -->
            <VisualState x:Name="Dark">
                <VisualState.Setters>
                    <Setter Property="PlaceholderColor" Value="White"/>
                    <Setter Property="TextColor" Value="White"/>
                    <Setter Property="CancelButtonColor" Value="White"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    
    <SearchBar.BackgroundColor>
        <OnPlatform x:TypeArguments="Color">
            <On Platform="Android" Value="{StaticResource 00dp}" />
            <On Platform="iOS" Value="{StaticResource 00dp}" />
        </OnPlatform>
    </SearchBar.BackgroundColor>
</SearchBar>

方案2：自定义Android渲染器修改图标颜色 #

如果需要直接控制搜索图标颜色，创建Android平台自定义渲染器：

1. 在Platforms/Android文件夹下添加渲染器类：

using Android.Widget;
using Microsoft.Maui.Controls.Platform;
using Android.Graphics;
using YourAppNamespace.Platforms.Android;

[assembly: ExportRenderer(typeof(SearchBar), typeof(CustomSearchBarRenderer))]
namespace YourAppNamespace.Platforms.Android
{
    public class CustomSearchBarRenderer : SearchBarRenderer
    {
        public CustomSearchBarRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<SearchBar> e)
        {
            base.OnElementChanged(e);
            if (Control != null && Element != null)
            {
                UpdateSearchIconColor();
            }
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
            if (e.PropertyName == nameof(Application.RequestedTheme))
            {
                UpdateSearchIconColor();
            }
        }

        private void UpdateSearchIconColor()
        {
            if (Control == null) return;
            var searchView = Control as SearchView;
            int searchIconId = Context.Resources.GetIdentifier("android:id/search_mag_icon", null, null);
            var searchIcon = searchView.FindViewById<ImageView>(searchIconId);
            
            if (searchIcon != null)
            {
                var isDarkMode = Application.Current.RequestedTheme == AppTheme.Dark;
                var iconColor = isDarkMode ? Android.Graphics.Color.White : Android.Graphics.Color.Black;
                searchIcon.SetColorFilter(iconColor, PorterDuff.Mode.SrcIn);
            }
        }
    }
}

额外检查 #

确认StaticResource 00dp的颜色值，若在浅色模式下为白色，建议通过视觉状态切换背景色，或进一步调整文本/图标颜色保证足够对比度。

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