HarmonyOS 鸿蒙Next @Extend,@Style 实现export方式 类似安卓全局style样式 其他页面共用

发布于 1周前 作者 songsunli 来自 鸿蒙OS

HarmonyOS 鸿蒙Next @Extend,@Style 实现export方式 类似安卓全局style样式 其他页面共用

@Extend,@Style 有什么方式可以实现export吗, 类似安卓全局style样式, 其他页面可以共用 

Harmonyos Next教程
2 回复
目前没有其他支持全局[@style](/user/style)和[@Extend](/user/Extend)的方式。

可以尝试用动态属性，自定义class实现AttributeModifier接口，然后在页面中调用

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-attribute-modifier

更多关于HarmonyOS 鸿蒙Next @Extend,@Style 实现export方式 类似安卓全局style样式 其他页面共用的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙系统中，通过[@Extend](/user/Extend)和[@Style](/user/Style)实现全局样式导出和共用，可以参考以下方式：

@Extend

[@Extend](/user/Extend)用于继承已有的样式，实现样式的复用和扩展。例如：

/* 定义一个基础样式 */
[@Style](/user/Style) baseStyle {
    color: #000000;
    font-size: 16px;
}

/* 继承基础样式并扩展 */
[@Style](/user/Style) extendedStyle [@Extend](/user/Extend)(baseStyle) {
    background-color: #ffffff;
    padding: 10px;
}

@Style 与 Export

在HarmonyOS中，要实现类似安卓全局样式的效果，可以通过定义全局样式资源，并在需要的地方引用。虽然HarmonyOS没有直接的export关键字用于样式导出，但可以通过定义在全局样式文件中，然后在各页面通过@Import来引入实现全局共用。

例如，在resources/base/styles目录下定义一个全局样式文件global_styles.css：

/* global_styles.css */
[@Style](/user/Style) globalStyle {
    color: blue;
    font-weight: bold;
}

然后在具体页面的样式文件中引入：

/* page_styles.css */
@Import global_styles;

/* 使用全局样式 */
.my-component {
    @Apply(globalStyle);
}

这样，globalStyle就可以在页面上被共用了。如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部