如何在工具栏跨平台更改三个按钮的颜色

Posted 2023-03-25

【中文标题】如何在工具栏跨平台更改三个按钮的颜色

【英文标题】：How change color of three btn at toolbar crossplatform

【发布时间】：2021-06-28 14:28:46

【问题描述】：

我不明白为什么不显示带点的按钮。但是点击这个区域会打开下拉菜单。

按钮上的点是白色的，它们与背景融为一体。我找到了适用于 android 的解决方案，但我该如何着手为该问题制定跨平台解决方案？

<ContentPage.ToolbarItems>
    <ToolbarItem 
        Order="Secondary"
        
        Text="Item 0"
        Priority="0"/>
    <ToolbarItem 
        Order="Secondary"
        Text="Item 1"
        Priority="1"/>
    <ToolbarItem 
        Order="Secondary"
        Text="Item 2"
        Priority="2"/>
</ContentPage.ToolbarItems>

【问题讨论】：

不可能知道你在做什么，因为你还没有发布任何相关的 xaml/code。

@Jason 我添加了代码

【参考方案1】：

当 Order 属性设置为 Secondary 时，行为会因平台而异。在 UWP 和 Android 上，辅助项目菜单显示为 三个点，可以点击或单击以显示垂直列表中的项目。在 ios 上，辅助项目菜单以水平列表的形式显示在导航栏下方。

一个简单的方法是改变工具栏的背景颜色。

App.xaml.cs：

 var navPage = new NavigationPage(new Page2());
        this.MainPage = navPage;

        navPage.BarBackgroundColor = Color.Blue;

更新：

安卓：

改变样式中3个点的颜色：

  <style name="MainTheme" parent="MainTheme.Base">  
<item name="android:textColorSecondary">#54FF9F</item> 
</style>

在 Toolbar.xml 中使用androidx.appcompat.widget.Toolbar：

  <?xml version="1.0" encoding="utf-8"?>
 <androidx.appcompat.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" 
android:id="@+id/toolbar"
android:layout_
android:layout_
android:background="@android:color/white"
android:theme="@style/MainTheme"
android:popupTheme="@style/MainTheme.Base" 
 />

iOS：

就像我在之前的回复中所说的那样，ios 上的辅助项目菜单显示为导航栏下方的水平列表。

您可以改用IOSToolbarExtensions。

NuGet：https://www.nuget.org/packages/IOSToolbarExtensions/

安装它并将下面的代码添加到 AssemblyInfo.cs 中：

[assembly: ExportRenderer(typeof(ContentPage), typeof(IOSToolbarExtensions.iOS.Renderers.IOSToolbarExtensionsContentPageRenderer), Priority = short.MaxValue)]

【讨论】：

我不想改变背景标题栏的颜色，我想用 3 个点改变按钮的颜色

我已经更新了我的回复。请检查一下。

它适用于android，IOS呢？它将如何在 iphone 上显示？

iOS 不支持三个点。你可以改用IOSToolbarExtensions

@Winteriscoming 这种情况有什么更新吗？你解决了这个问题吗？

【参考方案2】：

在style.xml文件中找到MainTheme并添加

<item name="android:textColorSecondary">#592bca</item> 

然后在Toolbar.axml文件中添加或更改

android:theme="@style/MainTheme"
android:popupTheme="@style/MainTheme.Base"