Question

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

在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样式提供了三种设置＆＃34;背景＆＃34;组件。按优先顺序递增，它们是：

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

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

所以这里发生的事情是你已经在CSS中为你的按钮设置了背景颜色，但是原生主题可能设置了一个背景图像，或者按钮样式的9个边框仍然覆盖你的设置。

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

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

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

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

如果您不想要原生主题的行李，只需创建自己的风格，并按照您想要的方式设置。

e.g。

MyButton {
    ...
}

在您的Java代码中：

btn.setUIID("MyButton");

代号一：为什么android按钮的外观与IOS按钮不同

1 个答案: