HarmonyOS鸿蒙Next中arkts在Column中执行方法使Image中position根据情况变更

HarmonyOS鸿蒙Next中arkts在Column中执行方法使Image中position根据情况变更

代码如下：希望根据if(this.remarkMap1.has(item.emp_id))等条件实现Image的position({x::‘80%’,y:‘2%’})的x从80递减15,当前调用 this.decreaseXPosition();方法报错’this.decreaseXPosition();’ does not comply with the UI component syntax. <ArkTSCheck>

@Component
struct personItem{
@Prop empInfo:EmpBaseInfo[];
@Prop remarkMap1:Map<string, boolean>;
@Prop remarkMap2:Map<string, boolean>;
private xPosition: string = '80%'

  private decreaseXPosition() {
    const currentValue = parseFloat(this.xPosition.replace('%', ''))
    let newValue = currentValue - 15
    // 确保 x 坐标不小于 0%
    if (newValue < 0) {
      newValue = 0
    }
    this.xPosition = `${newValue}%`
  }

  build() {
    Scroll(){
      Flex({ direction:FlexDirection.Row,wrap:FlexWrap.Wrap,justifyContent:FlexAlign.Start}) {
        ForEach(this.empInfo, (item: EmpBaseInfo, index) => {
          Column(){
            Stack(){
              if(this.remarkMap1.has(item.emp_id)){
                Image($r(`app.media.2`)).width(15).height(15).position({x:this.xPosition,y:'2%'})
                this.decreaseXPosition();
              }
              if(this.remarkMap2.has(item.emp_id)){
                Image($r(`app.media.3`)).width(15).height(15).position({x:this.xPosition,y:'2%'})
              }
              if(item.REMARK5 == '1'){
                Image($r(`app.media.4`)).width(15).height(15).position({x:this.xPosition,y:'2%'})
              }
            }
          }.width("8%").height(115).margin({right:3,bottom:3})
        
        })
      }
    }
  }
}

更多关于HarmonyOS鸿蒙Next中arkts在Column中执行方法使Image中position根据情况变更的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在ArkTS中，可以通过状态变量控制Image组件的position属性变更。首先定义状态变量：

@State imagePosition: Position = Position.Auto

然后在Column中通过条件判断修改该变量：

Column() {
  Image($r('app.media.icon'))
    .position(this.imagePosition)
  
  Button('Change Position')
    .onClick(() => {
      this.imagePosition = someCondition ? 
        Position.Absolute : 
        Position.Relative
    })
}

Position枚举提供Absolute、Relative、Fixed等定位方式。通过状态管理驱动UI变更是ArkTS推荐做法。

更多关于HarmonyOS鸿蒙Next中arkts在Column中执行方法使Image中position根据情况变更的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在ArkTS中，直接在build方法内调用自定义方法会导致语法错误。正确的做法是使用状态管理来实现动态位置变更。以下是修改建议：

  1. 将xPosition改为@State装饰器变量：
[@State](/user/State) private xPosition: string = '80%'
  1. 修改build方法中的调用方式，改为在条件判断中直接计算位置：
build() {
  Scroll(){
    Flex({ direction:FlexDirection.Row, wrap:FlexWrap.Wrap, justifyContent:FlexAlign.Start }) {
      ForEach(this.empInfo, (item: EmpBaseInfo, index) => {
        let currentX = this.xPosition
        Column(){
          Stack(){
            if(this.remarkMap1.has(item.emp_id)){
              // Image($r(`app.media.2`)).width(15).height(15).position({
              //   x: currentX,
              //   y: '2%'
              // })
              // currentX = `${parseFloat(currentX.replace('%',''))-15}%`
            }
            // 其他条件判断...
          }
        }
      })
    }
  }
}

注意：这种方法会导致每次build都重新计算位置。如果需要更精确的控制，建议使用数组存储每个item的位置状态。

回到顶部