HarmonyOS鸿蒙Next中【快应用】父组件中如何设置子组件样式

HarmonyOS鸿蒙Next中【快应用】父组件中如何设置子组件样式 问题背景： 子组件被引用时，如果在父组件的布局效果不理想，需要去修改子组件对应的样式，是比较麻烦的，现在快应用在1100版本之后推出了externalClasses属性，可以将外部样式直接传给自定义组件，便于开发者调试。

使用方式:

  1. 子组件中声明传递的样式externalClasses: ['childstyle']和class=”childstyle”。
  2. 父组件里调用childstyle=”parentstyle”。

相关代码： child.ux:

<template>
  <div class="container">
    <text class="txt" onclick="click">child button</text>
  </div>
</template>
<style>
  .container {
    flex: 1;
    flex-direction: column;
    align-items: center;
  }
</style>
<script>
  import prompt from '@system.prompt';
  export default {
    externalClasses: ['txt'],
    click() {
      prompt.showToast({
        message: 'this is child',
      })
    }
  }
</script>

parent.ux:

<import name="child" src="../New/child.ux"></import>
<template>
  <div class="container">
    <text class="txt">hello</text>
    <child txt="parentxt"></child>
  </div>
</template>
<style>
  .container {
    flex: 1;
    flex-direction: column;
    align-items: center;
  }
  .txt {
    height: 150px;
    width: 85%;
    margin-bottom: 15px;
    border: 1px solid #000000;
  }
  //父组件设置样式
  .parentxt {
    background-color: #00fa9a;
    height: 150px;
    width: 85%;
    align-items: flex-start;
    margin-bottom: 15px;
    border-color: #9400D3;
    border-width: 5px;
  }
</style>

运行截图： cke_4075.png


更多关于HarmonyOS鸿蒙Next中【快应用】父组件中如何设置子组件样式的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS鸿蒙Next中【快应用】父组件中如何设置子组件样式的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，父组件可以通过@Component装饰器中的styles属性为子组件设置样式。具体步骤如下：

  1. 定义样式：在父组件的styles属性中定义样式类。
  2. 应用样式：在子组件的@Component装饰器中通过class属性引用父组件定义的样式类。

示例代码：

@Component({
  styles: `
    .childStyle {
      color: red;
      font-size: 20px;
    }
  `
})
class ParentComponent {
  build() {
    Column() {
      ChildComponent({ class: 'childStyle' })
    }
  }
}

@Component
class ChildComponent {
  @Prop class: string = '';

  build() {
    Text('子组件').className(this.class)
  }
}

通过这种方式，父组件可以灵活地为子组件设置样式。

回到顶部