Xamarin Forms - 颜色如何在 iOS 的导航栏上工作

Question

我正在尝试为一个简单的 XF 应用程序设置 BarBackgroundColor 和 BarTextColor，但我不理解输出。代码后面是我看到的图片，所有代码都可以下载here。

我在下面设置了 BarBackgroundColor、BarTextColor 和 BackgroundColor。似乎唯一设置的颜色（来自所附图像）是 Color.Blue BarBackgroundColor。导航栏和状态栏的文字不应该是白色的吗？为什么页面的其余部分不是红色的？

App.xaml.cs

public App()
{
    InitializeComponent();

    var navPage = new NavigationPage(new MainPage());
    navPage.BarBackgroundColor = Color.Blue; 
    navPage.BarTextColor = Color.White;
    navPage.BackgroundColor = Color.Red;

    MainPage = navPage;
}

XAML

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="SampleApp.MainPage">

    <NavigationPage.TitleView>
        <StackLayout HorizontalOptions="Center" 
                     VerticalOptions="Center">
            <Label Text="Page Title" />
        </StackLayout>
    </NavigationPage.TitleView>

    <StackLayout>
        <!-- Place new controls here -->
        <Label Text="Welcome to Xamarin.Forms!" 
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />
    </StackLayout>

</ContentPage>

这是我得到的输出。

Answer 1

导航栏和状态栏的文字不应该是白色的吗？

是的，如果代码共享，则不会。

• 首先，我们将检查如何设置导航栏中的文本颜色。

因为在导航栏中设置自定义标题视图如下：

<NavigationPage.TitleView>
    <StackLayout HorizontalOptions="Center" 
                 VerticalOptions="Center">
        <Label Text="Page Title" />
    </StackLayout>
</NavigationPage.TitleView>

那么代码navPage.BarTextColor = Color.White;就不行了。原因是，你在ContentPage中设置了自定义的标题视图，而ContentPage覆盖了导航栏文字的效果。

如果要显示导航标题的白色，有两种基于共享代码的方式。

一个是：在自定义标题视图中为标签设置TextColor。

<NavigationPage.TitleView>
    <StackLayout HorizontalOptions="Center" 
                 VerticalOptions="Center">
        <Label Text="Page Title" TextColor = "White" />
    </StackLayout>
</NavigationPage.TitleView>

另一个是：使用原导航栏标题。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="SampleApp.MainPage"
             Title="Page Title"> // Adding title text here

    <StackLayout>
        <!-- Place new controls here -->
        <Label Text="Welcome to Xamarin.Forms!" 
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />
    </StackLayout>

</ContentPage>

然后代码navPage.BarTextColor = Color.White; 将适用于导航栏的文本。

• 第二，我们来看看如何设置状态栏的文字颜色。

这里你需要进入iOS Solution文件夹，然后用Xml Editor打开Info.plist文件如下：

然后添加 Key UIViewControllerBasedStatusBarAppearance 并将其值设置为false，如下所示。

<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>

保存和重建项目，现在代码navPage.BarTextColor = Color.White;可以工作 状态栏文字颜色。

为什么页面的其余部分不是红色的？

这个问题对于 Android 应该是不同的。如果在 Android 中运行navPage.BackgroundColor = Color.Red;，它会工作。但在 iOS 中不会。

原因是，导航控制器在 Android 和 iOS 之间是不同的。 Navigation Bar 在 Android 中只是一个栏，但 Navigation Bar 在 iOS 中可以是整个页面视图。这意味着如果在 Android 中为 NavigationPage 设置背景颜色，它可以在 Navigation Page 和 ContentPage 中工作。但是，在 iOS 中它只能在 Navigation 页面中使用。如果想要内容页面显示不同，您应该在内容页面中单独设置。

因此，可以在iOS背景色中进行如下设置。

//这里可以添加背景色

<StackLayout>
    <!-- Place new controls here -->
    <Label Text="Welcome to Xamarin.Forms!" 
           HorizontalOptions="Center"
           VerticalOptions="CenterAndExpand" />
</StackLayout>

最终效果如下：