조건 설정

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

상태가 적용되는 시기를 결정하려면 다음과 같이 하세요:

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

   

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

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

조건부 바인딩 만들기

Binding Editor 에서 컴포넌트와 속성을 선택하여 표현식을 만듭니다. 예를 들어 버튼을 눌렀을 때 상태를 변경하려면 버튼 컴포넌트와 해당 버튼의 눌림 속성을 선택할 수 있습니다.

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

논리 연산자 요약

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

또한 산술 연산자를 사용하여 검사 전에 숫자를 비교할 수 있습니다. 그러나 가능하면 이 용도로 별도의 프로퍼티를 만드는 것이 좋습니다.

언제 조건의 예

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

when: control.pressed

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

버튼을 누르지도, 선택하지도, 마우스오버하지도 않았을 때 상태를 적용하려면 다음과 같이 조건을 조합합니다:

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

버튼을 누르거나 선택했지만 마우스를 갖다 대지 않은 상태를 적용하려면 다음과 같이 작성합니다:

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