다시 오신 것을 환영합니다
이제 밑에 있던 두 개 버튼을 해결할 것입니다
여기서도 버튼 옵션을 '틀리게' 사용할 것입니다 예를 들어 Confirm 버튼을 사용하여
버튼 1개 대신에 2개를 넣을 것입니다
이 역시 유연하게 사용할 수 있습니다
사용하지 않을 이유가 없습니다. 여기에 텍스트 속성이 있습니다
그리고 confirmButton 속성이 있으며 AlertDialog로 override(오버라이딩)할 것입니다
우리의 코드로 오버라이딩하겠습니다
먼저 여기에 Row(로우)를 추가합니다
이 로우 역시 import해야 하는 것입니다
따라서 Alt+Enter를 누르고 이 Composable(컴포저블) Row를 선택합니다
이 로우에는 modifier(제어자)가 부여될 것입니다
Modifier.fillMaxWidth를 지정하고 padding(패딩)을 추가합니다
패딩으로 8 픽셀 밀도를 추가하여 너무 붙어있지 않도록 합니다
그리고 다른 속성을 추가해야 합니다
horizontalArrangement(가로 배열)이고 Arrangement.SpaceBetween을 선택합니다
이를 통해 로우에 아이템이 나란히 있어야 하지만
그 사이에 적당한 공간이 있도록 밀어야 한다는 것입니다
이해하셨나요?
그렇다면 이 로우에 포함할 내용은 무엇일까요?
애플리케이션을 다시 살펴보겠습니다
여기 완성된 것이 있습니다
여기 Add 버튼이 있고 Cancel 버튼이 있습니다
보시면 하나는 아주 왼쪽에 있고 다른 하는 매우 오른쪽에 있습니다
다시 말하자면 여기 AlertDialog 끝에 투명한 선이 있고
하나는 왼쪽에 하나는 오른쪽에 넣고 사이에 최대한 많은 공간을
넣으라고 하는 것입니다
이것이 이 배열이 실행하는 기능입니다
이제 이것을 완료했으니 여기에 첫 번째 버튼을 추가합니다
버튼이므로 onClick 이벤트가 필요합니다
버튼을 클릭하면 발생하는 것을 도입합니다
그렇지만 버튼에 내용도 필요합니다
안 그러면 이 오류가 발생합니다
여기서 보실 수 있습니다
간단하게 Add라고 합니다
이제 바로 다음 버튼으로 가겠습니다
여기도 onClick 이벤트가 필요하고 이곳에는
showDialog=false라고 합니다
이 버튼은 매우 단순합니다
AlertDialog를 비활성화 시킵니다
이해하시겠나요?
텍스트는 Cancel이라고 합니다
보시면 이 버튼에 표시된 내용이고
이 버튼의 기능이기 때문입니다
따라서 Cancel을 클릭하면 AlertDialog가 사라집니다
간단합니다
여기까지 쉬운 부분이었습니다
이제 더 어려운 부분으로 가겠습니다
아주 어려운 것은 아니지만 Cancel를 표시하고 dialog를 없애는
것보다는 어렵습니다
여기서 하려는 것은 itemName이 isNotBlank일 때마다
그래서 여기 if 문장을 넣은 것입니다
따라서 이 Add 버튼을 클릭할 때마다 이 입력 창이
항목 이름인 입력 창이 비어있는 경우
아무것도 발생하지 않아야 합니다
그러나 비어있지 않다면 새로운 쇼핑 항목 객체가 생성되어야 합니다
그리고 그 쇼핑 항목 객체를 항목 목록에 저장해야 합니다
이 sItems가 쇼핑 항목 목록입니다
이제 그것을 실행하겠습니다
newItem을 생성할 것인데 ShoppingItem 유형입니다
그리고 newItem에 ShoppingItem 객체를 부여합니다
따라서 id, 이름
수량 그리고
수정 여부를 알아야 합니다
따라서 id는
별도의 줄에 넣어서
조금 더 읽기 쉽게 하겠습니다
id는 sItems.size+1이 됩니다
즉, 목록에 있는 항목 수에서 1을 더하여
id로 지정하고 1로 시작한다는 의미입니다
즉, 목록에 항목이 없는 이상 sItems.size는 0이 되는 것입니다
이해하셨나요?
그리고 여기에 1을 더하기 때문에 id는 1이 됩니다
그리고 또 다른 항목을 추가하면 두 번째 항목의 id가 항목 목록의 크기가 된다는 것인데
즉, 1 더하기 1이므로 2가 됩니다
그러면 두 번째 항목의 id는 2가 됩니다
이것이 sItems size가
sItems.size+1이 하는 기능입니다
이제 id가 설정되었으니 이름을 설정합니다
이름은 매우 간단합니다
단순히 itemName입니다 이 변수의 목적이기 때문입니다
지금까지 itemName의 목적입니다
itemName은 여기에 입력한 것이고 이것을 저장하려는 것입니다
이제 또 다른 변수가 있습니다
이름은 되었고
이제 수량을 설정해야 합니다
수량은 itemQuantity.toInt입니다
즉, 여기에 있는 입력 창이... 다시 화면을 보여 드리겠습니다
여기에 입력한 것을
int로 변환합니다 지금은 int가 아니라 string(스트링)이기 때문입니다
이 스트링을 int로 변환합니다
여기서 문제가 발생할 수 있습니다
따라서 if 문장을 추가하는 등 여러가지를
추가할 때 조심해야 합니다
그러나 이것은 나중에 해결할 것입니다
일단은 기본적인 것을 이해하시면 됩니다
지금까지 newItem을 위해 필요한 것들입니다
좋습니다
newItem을 위해 설정할 속성들입니다
왜 isEditing은 수정할 필요가 없을까요?
아시나요?
기본으로 거짓으로 설정되어 있기 때문에 바꿀 필요가 없습니다
따라서 값을 수동으로 설정할 필요가 없습니다
이미 설정되어 있습다
거짓으로서 저장되는 것입니다
오버라이딩을 원한다면 오버라이딩할 수 있으나
그렇지 않다면 바꾸기 전까지는 거짓으로 설정됩니다
이제 Button(onClick으로 돌아오면 isNotBlank 그리고 newItem이 있습니다
이제 방금 설정한 newItem을 추가해야 합니다 새로운 쇼핑 항목을 의미합니다
sItems 변수인 목록에 추가해야 합니다
이제 sItems는 sItems 더하기 newItem이 됩니다
이제 이 버튼을 클릭하면 dialog도
더 이상 보이지 않도록 해야 합니
즉, AlertDialog도 가려져야 하는 것입니다
이것이 showDialog가 하는 역할입니다
그리고 마지막으로 itemName을 다시 빈 스트링으로 재설정하고자 합니다
우리가 원하지 않는 결과는
Add Item을 눌렀을 때 자동으로 예전에 넣은 항목 이름을 채워서
수동으로 지워야 하는 상황이기 때문입니다
굉장히 짜증날 수 있기 때문에 빈 스트링으로 재설정하는 것입니다
이제 버튼은
한번 보겠습니다
모두 좋아 보입니다
이제 직접 실행하여 이 정보가 반영되었는지 보겠습니다
아직 저장하고 화면에 표시하는 단계는 아닙니다
그렇지만 일단 Add Item을 클릭하겠습니다
여기 Add Shopping Item이 보입니다
이 입력 창이 보이고
저 입력 창이 보입니다
Add와 Cancel도 있습니다
여기에 한번 추가해 보겠습니다
House라고 입력하여
아이를 위한 작은 집을 구매하겠습니다
수량을 추가하고 Add를 클릭합니다
이제 이 항목이 영구 목록에 추가
되었지만
아직 표시되지는 않습니다 나중에 할 것입니다
다음 영상에서 설정을 시작할 것입니다
일단 지금까지 있는 것에 만족스럽습니다
여기 보시면 이 항목을 재설정하지 않았습니다
쇼핑
어디에 있죠?
OutlinedText의 onValueChange itemQuantity를 바꾸지 않아서
Add 버튼을 클릭해도 재설정되지 않습니다
물론 수량도 재설정하실 수 있습니다
좋습니다
이번 영상은 여기까지 입니다
다음 영상에서 뵙겠습니다