다시 오신 것을 환영합니다
이번 영상에서 수정 화면을 설정하겠습니다. 조금 전에 보여드린 이 작은 부분입니다
기본적으로 수정하는 동안 수정 목록이 어떻게 보일지 설정하는 것입니다
보시다시피 row(로우)에 column(컬럼)이 있고 그 옆에
두 개의 텍스트가 있고
여기 버튼이 있습니다
사실 이 둘 다 수정이 가능합니다
다시 말하자면 단순히 텍스트가 아니고 텍스트 입력 창입니다
여기서 사용할 것은 테두리가 있는 텍스트 입력 창이 아니고
기본 텍스트 입력 창이 될 것입니다
주위에 테두리가 없기 때문에 약간 다릅니다
이제부터 이것을 만들어 보겠습니다
여기서 새로운 composable(컴포저블)을 만들겠습니다
여기 ShoppingListItem 컴포저블이 있습니다
이제 새로운 컴포저블을 만들 것인데 이름은 ShoppingItemEditor로 합니다
여기에 ShoppingList 유형의 아이템이 필요합니다
ShoppingItem 유형 중에 추천된 것을 고릅니다
그 다음 편집이 끝나면 무엇이 발생할지 정의해야 합니다
즉, onEditComplete입니다
여기에도 또 Lambda(람다) 표현식이 나옵니다
따라서 string(스트링)과 Int를 원하고 아무것도 출력하지 않을 것입니다
따라서 이 또한
람다 표현식입니다
보시다시피 때때로 쓰이고 있습니다
즉, 이 컴포저블을 사용하면 편집을 원하는 항목을
전달하고
더불어 편집을 원하는 스트링과 Int도 전달해야 합니다
그래야 편집이 가능한데 기본적으로 항목의 이름과 수량을 전달하는 것입니다
여기에 마술을 부려 아무것도 출력하지 않을 것이지만
목록 항목 안에 업데이트합니다
그래서
이제 필요한 것을 설정하겠습니다
따라서 편집된 이름이 무엇이 될지 알아야 합니다
따라서 by remember로 하고 mutableStateOf(item.name)을 입력합니다
따라서 전달하는 쇼핑 항목을 편집된 항목의
기본 값이 이름으로 설정되는 것입니다
그 후 입력 창에 적은 것으로 override(오버라이딩)되는 것입니다
따라서
여기 입력 창에 들어갑니다
위의 입력 창이 편집된 이름을 오버라이딩합니다
그리고 여기에 편집된 수량이 들어가야 합니다
또한 현재 편집 중인지 아닌지 알아야 합니다
따라서 editedQuantity by remember를 입력합니다
그러면 여기에 항목 이름이 아니라 수량이 들어갑니다
그리고 마지막으로 editedQuantity 때문에 스트링을 만들어야 합니다
사용자 인터페이스의 이 입력 창은 아시다시피 스트링 유형입니다
숫자가 아닙니다
그렇습니다
이것이 우리의 제한점입니다
따라서 여기에 무엇을 전달하든 유형은
스트링이어야 합니다
즉, 수량은 integer(정수)인데
여기에 마우스를 올리면 유형이 Int인 것이 보입니다
그러나 이것을 스트링으로 변환해야 합니다
두 스트링 방법으로 실행할 것입니다
그리고 마지막으로 편집 boolean(불리언)이 필요한데 이 역시 by remember로 실행합니다
다시 state(상태)를 사용하는데 mutableStateOf를 사용합니다
우리의 쇼핑 목록의 속성을 기억하시나요?
name, quantity 그리고 isEditing이 있습니다
드디어 isEditing을 사용합니다
여기에 item.isEditing이 ShoppingItemEditor 컴포저블을
편집하는 속성의 기본 값이 됩니다
그렇다면 ShoppingItem 컴포저블의
내용은 무엇일까요?
Row(로우)입니다
일전에 말한 것과 같이 로우를 넣어 modifier(제어자)를 전달합니다
이미 여러 번 실행한 내용은 여러분의 시간을
아끼기 위해 빠르게 지나가겠습니다
여기도 마찬가지로 전체 너비를 채워야 합니다
여기에 배경을 추가하는데 이번에는 Color.White라는 것을 사용합니다
다시 말하자면 배경에 색상이 필요합니다
제가 사용하려는 색상은 Color에서 나옵니다And the color that I'm going to use is from color.
.Row이며 Companion Object(동반 객체)입니다
여기에 사용할 수 있는 다양한 색상이 있습니다
그리고 이 로우에 내용이 필요하며 없다면 오류가 계속 유지될 것입니다
로우에 또 수정할 내용은 padding(패딩)을 추가하는 것입니다
여기에 8 픽셀 밀도의 패딩을 추가하여 UI의 다른 요소에 아주 가깝지 않도록 합니다
마지막으로 항목을 가로로 배열합니다
따라서 horizontalArrangement를 넣습니다
그리고 Arrangement.SpaceEvenly를 선택합니다
Space(공간)를 이미 보셨을 것입니다
어디에 있었죠?
여기 SpaceBetween이 있습니다
이것은
두 항목 사이를 밀어내어 충분한 공간을 확보하는 것입니다
그러나 이제 여러 항목이 있기 때문에 SpaceEvenly를 사용합니다
즉 항목 사이 간격이 동일해야 한다는 의미입니다
서로 거리가 동일해야 한다는 말입니다
다른 항목과 마찬가지입니다
따라서 로우 안에 column(컬럼)을 넣습니다
이 컬럼에
이 두 항목이 들어가야 합니다
이해하시겠나요?
따라서 컬럼이 두 개가 있습니다
아니 두 항목이 있는 컬럼이 있습니다
그리고 여기에 Save 버튼이 있습니다
여기에 BasicTextField를 넣습니다
사용할 것이라고 이미 말씀 드렸습니다
쉽게 말하자면 몇 개의 값으로 기본 텍스트 입력 창을 생성할 수 있다는 것입니다
즉 변수를 사용합니다
먼저 값이 무엇인지 입력합니다
이 값을 editedName이라고 합니다
그 다음 기본 텍스트 입력 창의 값이 바뀌면 어떤 행동이 나올지 정합니다
따라서 onValueChange를 사용합니다
참고로 이 id는 도움이 안됩니다 BasicTextField를 import해야 하기 때문입니다
이제 도움이 될 것입니다
지금 현재 상황입니다
오류가 사라졌습니다
이제 할 것은 editedName을 it으로 설정하는 것입니다
즉 이번에도 텍스트 입력 창을 변경할 때마다 이 onValueChange가 억제할 것입니다
이 변수가 editedName 변수로 할당됩니다
이미 여러 번 실행했으나 다시 보여드렸습니다
이제 한 줄 만 수락하도록 설정하겠습니다
이해하셨나요?
singleLine 파라미터를 참으로 설정합니다
그리고 마지막으로 모습을 수정합니다
이를 위해 Modifier.wrapContentSize를 입력합니다
이를 통해 필요한 공간만 차지하고 나머지는
차지하지 않습니다
이것이 warpContentSize가 하는 기능입니다
안에 있는 항목에 따라 필요한 공간만 차지한다고 나와 있습니다
이 경우 안에 있는 텍스트 만큼 너비를 차지하는 것입니다
따라서 텍스트의 너비가 다섯 자라면 기본 텍스트 입력 창의 너비가 다섯 자가 됩니다
여기에 8 픽셀 밀도의 패딩도 추가됩니다
지금까지 편집된 이름 텍스트 입력 창이었습니다
이제 편집된 수량에도 동일한 작업을 실행합니다
여기 editedQuantity가 있습니다
여기에도 마찬가지로 편집된 수량을 오버라이딩합니다
나머지 설정은 동일하게 적용합니다
이것이 우리의 컬럼입니다
여기 두 텍스트 입력 창입니다
그런데 여기 아직도 Save 버튼이 로우 안에 있습니다
이해하셨나요?
모든 것이 아직 로우 안에 있다는 의미인데
여기에서 시작하고 여기까지 포함되는데 컬럼 바로 다음에 사이 또는 안에 넣을 수 있습니다
여기에 보튼을 추가할 것입니다
보튼이 아니라 버튼입니다
이 버튼에 onClick 이벤트를 넣기 때문에 내용이 있는지 확인해야 합니다
저는 save라고 적겠습니다
대문자 S이어야 합니다 이제 버튼에 Save라고 적혀 있습니다
그렇다면 Save 버튼을 클릭하면 무엇이 발생해야 할까요?
먼저 편집이 완료되었다고 나와야 합니다
따라서 isEditing을 거짓이라고 설정합니다
그 다음 onEditComplete 함수를 불러옵니다
여기에 이름과 수량을 전달합니다
그러나 수량은 정수이므로
inIntOrNull으로 전달됩니다
그 다음 Elvis operator(엘비스 연산자)를 다시 사용하여 기본 값이
null인 경우 기본 값은 1이 됩니다
다시 말하자면 말이 안되는 내용 또는 문자를 입력하면
기본 값인 1로 된다는 것입니다
이 부분이 말하는 것입니다
즉 텍스트를 editedQuantity로 변환하는데 스트링에서 정수로 변환하는 것입니다
그리고 이 정수가 숫자이면 Int가 됩니다
나머지 경우는 null이 되며 null은 다시 1로 변환됩니다
따라서 이상한 것을 입력하면 수량이 1이 됩니다
지금까지 ShoppingItemEditor였습니다
계속 진행하면서 이 함수를 부르고 싶지만 보시다시피
아주 많은 세부 사항을 전달해야 합니다
그렇기 때문에 이 부분은 다음 영상에서 진행하겠습니다
좋습니다
다음 영상에서 뵙겠습니다