조건 설정

when 조건을 설정하여 여러 컴포넌트의 속성 참/거짓 여부를 평가하고, 해당 조건이 적용되는 상태로 UI를 전환할 수 있습니다. 특정 조건이 참인지 거짓인지, 다른 값보다 크거나 같은지 등을 평가할 수 있습니다. 또한 AND나 OR과 같은 연산자를 사용하여 여러 컴포넌트의 참/거짓 여부를 평가할 수도 있습니다.

상태가 적용되는 시점을 결정하려면:

1. ‘ View ’ > ‘ Views ’ > ‘ States ’로 이동합니다.

   

2. When Condition 에서 를 선택합니다.
3. ' Binding Editor'에서 해당 상태에 대한 ' when ' 속성을 지정합니다.
4. 상태를 적용하고자 할 때 true 로 평가되는 부울 표현식을 해당 속성의 값으로 설정하십시오.

when 조건은 코드에서 나타나는 순서대로 왼쪽에서 오른쪽으로 평가됩니다. 따라서 두 개의 서로 다른 상태에 대해 모두 true 로 평가되는 두 가지 조건이 있는 경우, 첫 번째 상태가 적용됩니다.

조건부 바인딩 생성

Binding Editor 에서 표현식을 만들 구성 요소와 속성을 선택합니다. 예를 들어, 버튼이 눌렸을 때 상태를 변경하려면 버튼 구성 요소와 해당 pressed 속성을 선택할 수 있습니다.

Binding Editor 에서 표현식을 작성할 때, 코드 완성 기능이 표현식에서 사용할 수 있는 컴포넌트와 해당 속성을 나열해 줍니다.

논리 연산자 요약

표현식에서 다음 논리 연산자를 사용하여 여러 조건을 하나의 표현식으로 결합할 수 있습니다:

또한, 검사 전에 산술 연산자를 사용하여 숫자를 비교할 수 있습니다. 하지만 가능하면 이 목적을 위해 별도의 속성을 생성하는 것이 좋습니다.

조건문 사용 예시

버튼이 눌렸을 때 해당 상태에 적용하려면 다음과 같이 작성합니다:

when: control.pressed

버튼이 눌리지 않았을 때 상태를 적용하려면 ‘ NOT ’를 선택합니다.

버튼이 눌리지 않았고, 선택되지 않았으며, 마우스가 올려져 있지 않을 때 상태를 적용하려면 다음과 같이 조건을 조합하십시오:

when: !control.pressed && !control.checked && !control.hovered

버튼이 눌리거나 선택되었으나 마우스가 호버되지 않은 경우 상태를 적용하려면 다음과 같이 작성합니다:

when: control.pressed || control.checked && !control.hovered