【问题标题】:Xamarin Forms 4.0 Shell Flyout Menu Top part background color settingXamarin Forms 4.0 Shell Flyout Menu 顶部背景颜色设置
【发布时间】:2019-11-10 05:44:35
【问题描述】:

我正在使用 Xamarin Forms 4.0 Shell 创建应用程序。但我无法将弹出菜单的最顶部自定义为黑色。我知道将浮出控件的背景颜色设置为黑色可以解决这个问题,但我需要将浮出控件的下部保持为其他颜色。有没有其他方法可以实现这一目标?请参考下图。

提前致谢!


我尝试将 UIApplication.SharedApplication.StatusBarStyle 从 Light 更改为 Default,下面的屏幕截图显示时钟显示为黑色字体(蓝色箭头),但 Wifi 电池图标消失了(红色箭头)


已添加 sample on Github 以供审核。

【问题讨论】:

    标签: shell xamarin.forms flyout


    【解决方案1】:

    这有点晚了,但我自己也遇到了这个问题。实际上,这似乎是一个错误。我在您的 GitHub 问题上发布了一些我发现的内容,希望 Xamarin 团队能够修复。

    与此同时,我发现了一种解决方法,可以使所有平台之间的弹出标题相同,而无需任何奇怪的其他黑客攻击。

    作为完整参考 - 我发现浮出标题上方的白条实际上是下面浮出内容的一部分 - 菜单项。如果您更改弹出菜单的背景颜色,您将自己看到。似乎允许弹出菜单流入iOS安全区域,但标题不能。我所做的是在弹出标题模板的布局中使用负边距,然后设置一些填充以偏移 onplatform 块中的安全区域。因为这会有效地缩小内容区域,所以我也按平台设置了高度。这最终看起来像下面的代码:

        <Shell.FlyoutHeaderTemplate>
            <DataTemplate>
                <StackLayout BackgroundColor="{DynamicResource Primary}">
                    <StackLayout.Margin>
                        <OnPlatform x:TypeArguments="Thickness">
                            <On Platform="iOS" Value="0,-1,0,0" />
                        </OnPlatform>
                    </StackLayout.Margin>
                    <StackLayout.Padding>
                        <OnPlatform x:TypeArguments="Thickness">
                            <On Platform="iOS" Value="0,20,0,0" />
                        </OnPlatform>
                    </StackLayout.Padding>
                    <StackLayout.HeightRequest>
                        <OnPlatform x:TypeArguments="x:Double">
                            <On Platform="iOS" Value="220" />
                            <On Platform="Android" Value="200" />
                        </OnPlatform>
                    </StackLayout.HeightRequest>
    
                    <ContentHere>...</ContentHere>
    
                </StackLayout>
            </DataTemplate>
        </Shell.FlyoutHeaderTemplate>
    

    我不敢相信我只在此处和该 GitHub 链接中看到过此问题...但希望这可以帮助其他任何遇到此问题的人,直到 Xamarin 团队的修复程序生效!

    【讨论】:

    • 附带说明 - 填充的值 20 纯粹是经验性的。我不知道安全区域是否实际上是 20px,或者这是否恰好可以解决。我建议在将其投入生产之前自行测试一下。
    【解决方案2】:

    您是否尝试过创建 Flyout Header 控件?使用此控件,您可以自定义弹出按钮的上半部分。 Shell Documentation

    如果这有帮助,请告诉我。

    【讨论】:

    • 感谢您的帮助。带有名称和标题的个人资料图片的黑色部分实际上是一个 Flyout Header 控件。谢谢!
    【解决方案3】:

    图片中弹出菜单的最顶部是状态栏

    您似乎在项目中设置了UIApplication.SharedApplication.StatusBarStyle = UIStatusBarStyle.LightContent;,并且文本颜色为white,因此您不会在white 背景视图下看到任何文本。

    要更改状态栏的背景颜色,可以设置UIApplication.SharedApplication.StatusBarStyle = UIStatusBarStyle.Default; 使状态栏可见或自定义状态栏的背景颜色。

    【讨论】:

    • 感谢您的帮助。我已编辑问题以显示将 UIApplication.SharedApplication.StatusBarStyle 从浅色更改为默认值的结果。这似乎没有达到我想要的。我打算给我的应用贴上白标签并将其发布到 Git 上供大家查看。谢谢!
    • @SamuelLeung 是的,wifi 电池图标不会显示,因为弹出窗口的宽度短于屏幕宽度。顺便说一句,Git 链接在哪里。
    • 抱歉,我需要一些时间尽可能多地尝试白标,链接是github.com/ltin071/XFSample20190702
    • 是的,如果将 UIApplication.SharedApplication.StatusBarStyle 设置为默认值,wifi 和电池将变为黑色样式,并且在黑色背景下不可见。
    • 我想探索在弹出窗口打开时自定义黑色状态栏背景和白色时间显示的任何可能性,只需要与弹出窗口关闭的外观保持一致
    猜你喜欢
    • 1970-01-01
    • 2019-09-09
    • 2021-06-25
    • 1970-01-01
    • 1970-01-01
    • 2020-04-27
    • 2021-12-10
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多