@Builder数据触发页面更新

interface stateItem {
  label: string;
  color: string;
  bgColor: string;
}

const stateList: stateItem[] = [
  { label: '小队级', color: '#DCC704', bgColor: 'rgba(220, 199, 4, 0.1)' },
  { label: '监区级', color: '#FF7D00', bgColor: 'rgba(255, 125, 0, 0.10)' },
  { label: '监狱级', color: '#F2281B', bgColor: 'rgba(242, 40, 27, 0.10)' }
]

class Level {
  level: number | null = null;
}

@Builder
export function JudgeLevel(item: Level, size?: string) {
  Column() {
    if (item.level) {
      Text(stateList[item.level-1]?.label)
        .fontColor(stateList[item.level-1]?.color)
        .fontSize(size == 'large' ? 14 : 12)
    }

  }
  .padding(size == 'large' ? {
    left: 12,
    right: 12,
    top: 8,
    bottom: 8
  } : {
    left: 8,
    right: 8,
    top: 4,
    bottom: 4
  }

  )
  .backgroundColor(item.level ? stateList[item.level-1]?.bgColor : '')
  .borderRadius(4)
  .border({ width: { bottom: 1 }, color: '#F2F3F5' })

}


@Builder
export function StyledButton(text: string, color: Resource) {
  Button(text)
    .backgroundColor(color)
    .width('80%')
}

当数据改变更改视图时，这个必须通过按引用方式传递class Level { level: number | null = null; }