지난 포스팅에서 랜덤 블록의 기본 사용법을 설명해드렸는데요. 랜덤 블록과 리스트 블록을 함께 이용해서 다양한 앱을 만들수도 있다는 말씀도 드렸죠. 랜덤블록과 리스트블록의 콜라보. 그럼 이번 포스팅에서 바로 배워볼까요?
이번 포스팅을 읽고 나면 이런 앱을 만들 수 있어요 !
1. 어셋 준비
일단 저렇게 보여 줄 이미지들이 필요하겠죠? 저는 4개의 이미지를 준비했어요.
아래 네 개의 이미지파일을 다운받아서 Assets에 올려주세요.
4개의 이미지를 모두 업로드하면 어셋준비는 끝 !
2. 디자이너 화면
이제 화면 디자인을 해볼까요? 컴포넌트를 끌어다 놓습니다. 이미지 하나와 버튼 하나만 있으면 됩니다. 왼쪽 컴포넌트 모음에서 찾아 핸드폰그림 위에다 끌어다 놓으세요.
Image 컴포넌트 한 개
Button 컴포넌트 한 개
버튼의 배경색과 텍스트는 우측에서 마음껏 바꿔보세요. 아무것도 안바꾸고 그냥 둬도 된답니다.
화면 디자인은 완료 !
3. 블록 화면
이제 코딩합시다 !
이렇게 코딩하면 끝 ! 간단해요.
1.png 처럼 파일의 이름을 정확히 적어줘야 한다는 걸 주의해주세요.
4. 코딩해석
리스트 블록에 있는 인덱스(index)라는 것은 리스트에서 몇 번째 항목인지 가리키는 의미에요. 지금 리스트에는 4개의 이미지가 있으니까 1, 2, 3, 4 라는 4개의 인덱스가 있는 거죠.
index 1은 1.png
index 2는 2.png
index 3은 3.png
index 4는 4.png
라고 할 수 있어요.
5. 실행해보기
컴페니언 연결이나 빌드해서 실행해보세요. 잘 될 거에요.
어셋에 올릴 그림을 귀여운 그림이나 지인들 사진들을 이용해서 함께 만들어보면 더 재밌을 거에요.
이번에도 여기까지 따라오시느라 수고 많으셨습니다 ! 정말 멋져요 !
댓글