21. 버튼을 누르면 화면이 바뀌게 하고 싶어요.

하나의 탭 내에서 A버튼을 누르면 A 화면이, B버튼을 누르면 B 화면이 나오도록 설정해 볼게요.

예시) 쇼핑몰 앱에서 상품 정보 버튼, 상품 후기 버튼 등 클릭하는 버튼에 따라 다른 정보의 화면을 보여줘요.

같은 페이지 내에서 화면 전환을 위해 조건에 따라 다른 결과를 보여주는 스위치(조건) 블록을 활용할 거예요. 그리고 그 조건을 'A버튼 또는 B버튼을 클릭 시'로 설정할게요.

1. 먼저 선택지를 표현하기 위해 옵션을 만들어 주세요.

1. 원하는 화면에 단일 항목 선택 블록을 추가해, 1.의 옵션과 연결해 주세요.

• 이 때, 모드는 편집 모드로 설정하고 항목 ID를 기억해 주세요.

1. 스위치(조건) 블록을 단일 항목 선택 블록 아래에 추가해 주세요.

• 스위치 블록 > 조건 1의 항목명에 B, 조건 2의 항목명에는 A를 넣어주세요. 항목명을 설정하는 이유는 어떤 조건인지 쉽게 파악하기 위함이에요.

• 화면에서 버튼을 클릭하지 않아도 기본으로 보여줄 조건을 가장 아래에 설정해 주세요. 예시) 조건 2의 항목명에 A(기본값)이라고 작성했어요.

• A는 기본 값으로 조건을 따로 설정해 주지 않을 거예요.

• B를 아래와 같이 설정해 주세요.

  • 조건 항목 : inputData. radio

  • 조건 : 조건 값과 같다.

  • 조건 값 : B

'inputData'는 현재 화면에서 갖고 있는 데이터를 의미하며 'radio'는 위에서 만든 단일 항목 선택 블록의 항목 ID입니다. 따라서 현재 선택된 옵션 값이 B일 때 B폴더의 내용을 보여주겠다는 의미예요.

1. 각 조건에 맞게 화면을 구성해 주세요. 예시로 B를 눌렀을 때는 'B화면'이라는 글자가 보이도록 A를 눌렀을 때는 'A화면'이라는 글자가 보이도록 설정했어요.

이렇게만 설정하면 버튼을 눌러도 화면은 바뀌지 않을 거예요. 이때 체인을 활용해요.

체인은 두 개 이상의 블록이 하나의 기능으로 작동할 수 있도록 해줘요.

1. 단일 항목 선택 블록에 액션 체인을 아래처럼 설정해 줄게요. 체인 send 키는 중복되지 않게 작성해 주세요.

1. 아래 사진처럼 스위치(조건) 블록에 체인 Receive를 설정해 주고 체인 receive 키에 위에서 설정한 키값을 복사해 주세요.

1. 새로고침 후, 앱을 확인해 보시면 A를 누르면 A 화면이, B를 누르면 B 화면이 나오는 것을 확인할 수 있어요.

23.11.28 Jipang