HarmonyOS鸿蒙Next中style如何根据不同条件显示不同的style？

HarmonyOS鸿蒙Next中style如何根据不同条件显示不同的style？ 在一个list中如何根据不同item的值，设置不同的style？我按下面这样写是，编译出错，提示无法解析：Template parsing error: Error: An error occurred when parsing the inline Template parsing error: Error: An error occurred when parsing the inline style: `{{clickid === item.id?‘background-color:#548ff6’ . For data binding, configure minPlatformVersion >= 1040.

<list class="flst" if="forecast.length > 0"> <list-item id="{{item.id}}" type="listItem" class="listitem" for="{{item in forecast}}" onclick="gotopay(item.id)"> <div style="{{clickid === item.id ? 'background-color:#548ff6; color:#ffffff;' : 'background-color: #ffffff; color:#548ff6;'}}"> <text class="na" style="{{item.id === clickid ? 'color:#ffffff' : 'color: #548ff6'}}">{{item.name}}</text> <text class="pr" style="{{item.id === clickid ? 'color:#ffffff' : 'color: #548ff6'}}">售价{{item.price}}</text> </div> </list-item> </list>


更多关于HarmonyOS鸿蒙Next中style如何根据不同条件显示不同的style？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

你好，三元表达式可以在colorChange方法里使用，建议您按照如下方式使用

更多关于HarmonyOS鸿蒙Next中style如何根据不同条件显示不同的style？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


亲爱滴开发者 ，这个问题已经在处理中啦，稍后答复你哟 ，么么哒

在HarmonyOS鸿蒙Next中，可以通过[@State](/user/State)和[@Builder](/user/Builder)等装饰器来实现根据不同条件显示不同的样式。具体步骤如下：

  1. 定义状态变量：使用[@State](/user/State)装饰器定义一个状态变量，用于存储当前的条件状态。

    [@State](/user/State) condition: boolean = false;

  2. 创建样式构建器：使用[@Builder](/user/Builder)装饰器创建一个样式构建器，根据条件返回不同的样式。

    [@Builder](/user/Builder)
getStyle() {
  if (this.condition) {
    return { backgroundColor: '#FF0000' }; // 条件为真时的样式
  } else {
    return { backgroundColor: '#00FF00' }; // 条件为假时的样式
  }
}

  3. 应用样式：在组件的style属性中调用样式构建器，动态应用样式。

    [@Component](/user/Component)
struct MyComponent {
  [@State](/user/State) condition: boolean = false;

  [@Builder](/user/Builder)
  getStyle() {
    if (this.condition) {
      return { backgroundColor: '#FF0000' };
    } else {
      return { backgroundColor: '#00FF00' };
    }
  }

  build() {
    Column() {
      Text('Hello, HarmonyOS')
        .style(this.getStyle())
    }
  }
}

  4. 更新状态：通过事件或其他逻辑更新状态变量，触发样式的重新计算和应用。

    Button('Toggle Condition')
  .onClick(() => {
    this.condition = !this.condition;
  })

通过以上步骤，可以在HarmonyOS鸿蒙Next中实现根据不同条件显示不同的样式。

在HarmonyOS鸿蒙Next中，可以通过@State和@Builder结合条件判断来实现根据不同条件显示不同的样式。首先，使用@State定义一个状态变量，然后在@Builder中根据该变量的值动态设置样式。例如：

@State isActive: boolean = false;

@Builder
build() {
  Column() {
    Text('Hello, HarmonyOS')
      .style(this.isActive ? styles.activeStyle : styles.defaultStyle)
      .onClick(() => {
        this.isActive = !this.isActive;
      });
  }
}

const styles = {
  activeStyle: {
    color: 'red',
    fontSize: 20
  },
  defaultStyle: {
    color: 'black',
    fontSize: 16
  }
};

通过点击文本，isActive状态会切换，从而动态应用不同的样式。

回到顶部