代号一：为什么android按钮的外观和IOS按钮不一样

Question

我目前正在使用代号为 1 的 css 插件来设计我的应用程序，但我无法弄清楚为什么 Button 的默认外观对于 android 和 IOS 是不同的。

在 IOS 中是这样的：

在 Android 中是这样的：

它应该看起来像它在 IOS 中的所有设备。

在 Css 文件中，我有这个 Button 条目：

Button {
    cn1-derive: Button;
    background-color: #005EA8;
    color: white;
}

Button.unselected {
    cn1-derive: Button.unselected;
    background-color: #005EA8;
    color: white;
}

Button.pressed {
    cn1-derive: Button.pressed;
    background-color: white;
    color: #005EA8;
}

不仅仅是登录按钮应该看起来像这样，而是所有按钮。没有一个按钮看起来应该在 Android 上，但在 IOS 上看起来都像。

此外，您可能会注意到，点击时外观会发生变化。在 IOS 中按预期工作，在 Android 中 点击时文本颜色变为 #0005ea8，但背景仍然是灰色。

我在这里错过了什么？

Answer 1

这是 CSS 符合 CN1 主题的丑陋部分之一。问题是您的 CSS 主题被应用在 CN1 本机主题之上。您在 Button 上设置的任何属性都将覆盖本机主题中的任何这些属性，但是您不会覆盖本机主题中 Button 的其他属性。

此外，CN1 样式提供了三种设置组件“背景”的方法。按优先级升序排列，它们是：

1. 背景颜色
2. 背景（图片）
3. 边框（9 片边框有效地设置了整个背景）。

如果您以相同的样式应用其中两个，则列表中较低的一个（数量较高）将优先。例如。如果您同时设置了背景颜色和 9 片边框，那么您将根本看不到背景颜色 - 您只会看到 9 片边框。

所以这里发生的情况是，您已经在 CSS 中为按钮设置了背景颜色，但本机主题可能设置了背景图像，或者 Button 样式上的 9 片边框仍然覆盖了您的设置。

您的问题有几个解决方案：

解决方案 1：覆盖其他“背景”属性

设置border: none（以确保覆盖任何 9 片边框）（或设置边框）。并指定cn1-background-type: none 以确保没有应用图像背景：

Button {
    background-color: #005EA8;
    color: white;
    border: none;
    cn1-background-type: none;
}

注意：您也不需要指定cn1-derive: Button，因为您的样式名称实际上是按钮。

解决方案 2：从头开始创建自己的 Button 类

如果您不想要原生主题的包袱，只需创建自己的样式，并按照您的需要进行设置。

例如

MyButton {
    ...
}

在你的 Java 代码中：

btn.setUIID("MyButton");