다시 오신 것을 환영합니다
이제 row(로우)를 완성하겠습니다
지금 상태를 확인하고
아직 까지 텍스트만 표시되었고 람다 표현식도 살펴보았습니다
이제 수량을 보여줄 텍스트를 추가합니다
이를 위해 text에는 item.name이 아닌
수량이어야 합니다
즉, Qty 콜론(:) 그리고 item. 그리고
quantity를 입력합니다
이와 같이 입력합니다
그리고 여기에 따옴표(")를 넣고 완성합니다
또한 여기에 modifier(제안자) 넣고 8 픽셀 밀도로 설정합니다
그리고 다음에 두 개의 버튼이 있는 로우를 추가합니다
로우 안에 로우가 생기는 것입니다
그리고 약간의 추가 padding(패딩)을 넣기 위해 이것도 사용합니다
따라서 여기에 modifier=Modifier.padding을 넣습니다
그리고 8 픽셀 밀도로 정합니다
로우 자체에는 두 개의 아이콘 버튼이 생길 것입니다
아이콘 버튼이라는 것이 있습니다
버튼과 같지만 아이콘 모양입니다
아이콘 버튼에 onClick 이벤트를 넣을 수 있습니다 onClick을 입력하고
onEditClick을 입력합니다
따라서 ShoppingListItem에 코드로 전달하는 것은 모두 실행되어야 합니다
이 아이콘 버튼을 클릭하면
먼저 IconButton을 import해야 합니다
그리고 다음으로 아이콘 버튼에 Icon을 입력합니다
따라서 여기에 Icon을 입력하고
Icon을 import합니다
Alt+Enter를 누르고 아이콘 composable(컴포저블)을 사용합니다
이제 이 아이콘에 imageVector가 필요합니다
이를 하기 위해 다양한 방법이 있으나
저는 imageVector를 사용하여 Icons.Default.Edit을 사용할 것입니다
이와 같이 있습니다
imageVector라는 속성이 있습니다
어떠한 이미지 벡터가 필요합니다
여기 Edit을 통해 이미지 벡터를 출력하는데 기본적으로
공간적으로 효율적인 이미지를 의미합니다
따라서 Kotlin 또는 Android Studio에서 import한 이름 공간 대신에
다양한 버튼을 사용할 수 있습니다
여기서 이것저것 시도해 보며 어떤 버튼이 있는지 살펴볼 수 있고
어떤 모양인지 볼 수 있습니다
여기 Edit 버튼, Add 버튼, AccountBox 버튼, List 등
충분히 많은 아이콘이 있습니다 아주 많은 것은 아니지만 주요한 것은 모두 있습니다
Search, Send, Refresh, Play 등
모두 있습니다 제가 사용할 것은 Edit 버튼입니다
그 다음 다른 파라미터를 전달하는데 contentDescription입니다
저는 null이라고 설정할 것입니다
따라서 내용 설명을 수정하지 않을 것입니다
이제 스트링을 또 추가하여 어떤 로우에도 Edit 버튼을 넣을 수 있으나
일단은 단순하게 하겠습니다
다음으로 바로 밑에 또 다른 아이콘 버튼을 추가하는 것입니다
이는 onDeleteClick에 실행되어야 합니다-
이제 보이는 아이콘은 Delete 아이콘이 될 것인데 여기 보이는
휴지통 아이콘입니다
이 정도입니다
여기까지 로우 아이템에 대한 사용자 인터페이스의 모습이었습니다
이제 수량도 있고 이름도 있고 두 개의 버튼이 생겼으니
우리가 원한 것을
달성했습니다
이제 코드를 다시 실행하고 어떤 모습일지 확인합니다
항목을 추가하기 위해 마우스를 또 추가합니다
1개를 넣습니다
이제 추가하면 마우스 수량 1이 보입니다
그리고 두 개의 버튼도 보입니다
수정 버튼과 삭제 버튼입니다
현재는 아무것도 하지 않습니다
여전히 도입해야 하지만
나중에 해결할 것입니다
오늘 영상은 여기까지 입니다
다음 영상에서 Editor로 갈 것입니다
이것이고 이 수정 버튼을 클릭하면 나오는 작은 UI입니다
다음 영상에서 만들 내용입니다
다음 영상에서 뵙겠습니다