HarmonyOS鸿蒙Next中【快应用】按钮的圆角样式不生效

HarmonyOS鸿蒙Next中【快应用】按钮的圆角样式不生效

现象描述

在div里包含两个input，分别定义“取消”和“确定”两个按钮，但是“取消”按钮的圆角样式不生效。

问题分析

分析如下两个按钮样式定义的代码，定义两个按钮公共样式的代码：

.button-div input {
    width: 148px;
    height: 48px;
    border-radius: 18px;
    font-size: 30px;
    flex: 1;
    margin: 10px;
}

分别定义按钮样式的代码：

.btn_cancel {
    color: #007D00;
    background-color: #FFFFFF;
}
.btn_agree {
    background-color: #007DFF;
    color: #FFFFFF;
}

发现“取消”按钮的背景色设置了白色，因和白底同色导致圆角效果无法体现（如果不设置背景色，效果和设置白色是一样的）。

解决方法

可以有两种方案解决：

【方案一】给“取消”按钮更换一个背景色。

【方案二】基于现有白色背景，设置一个边框，示例代码如下：

.btn_cancel {
    color: #007D00;
    background-color: #ffffff;
    border: 1px solid #000000; //设置边框
}

加上边框后的效果：


更多关于HarmonyOS鸿蒙Next中【快应用】按钮的圆角样式不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS鸿蒙Next中【快应用】按钮的圆角样式不生效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，如果【快应用】按钮的圆角样式不生效，可能是以下原因导致的：

  1. 样式冲突：检查是否有其他样式覆盖了圆角设置，确保border-radius属性未被更高优先级的样式覆盖。

  2. 组件限制：某些组件可能不支持圆角样式，确认使用的组件是否支持border-radius属性。

  3. 代码错误：检查CSS或XML代码，确保border-radius属性正确书写，且单位（如px或dp）使用正确。

  4. 版本兼容性：确认使用的HarmonyOS版本是否支持该样式属性，必要时更新到最新版本。

  5. 缓存问题：清除应用缓存或重新编译项目，确保样式更新生效。

通过以上步骤排查问题，通常可以解决圆角样式不生效的情况。

回到顶部