클래스와리스트를사용하기

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- android:클래스와리스트를사용하기 [2024/08/08 22:59] – 뷰모델 공급자 지정 이거니맨
+++ android:클래스와리스트를사용하기 [2024/08/09 00:02] (현재) – [4. 버튼 클릭 이벤트] 이거니맨
@@ 줄 193: / 줄 193: @@
+==== 3. 데이터가 없는 경우에 대한 예외 처리 ====
+TodoListPage.kt는 다음과 같이 수정한다.
+fakeTodoList()가 아닌 실시간 Todo ViewModel을 사용하는 것이므로 처음에는 데이터 값이 없다. 따라서 이에 대한 예외를 처리해 줘야 한다.
+<code kotlin>
+        todoList?.let {
+            LazyColumn(
+                content = {
+                    itemsIndexed(it) {
+                            index : Int, item : Todo ->
+                        TodoItem(item = item)
+                    }
+                }
+            )
+        }?: Text(
+            modifier = Modifier.fillMaxWidth(),
+            textAlign = TextAlign.Center,
+            text = "No Items yet",
+            fontSize = 16.sp
+        )
+</code>
+==== 4. 버튼 클릭 이벤트 ====
+=== 가. 추가하기 버튼 ====
+TodoListPage.kt에 다음과 같이 버튼 클릭 이벤트를 추가한다.
+<code kotlin>
+            OutlinedTextField(value = inputText, onValueChange = {
+                inputText = it
+            })
+            Button(onClick = { viewModel.addTodo(inputText); inputText = ""; }) {
+                Text(text = "Add")
+            }
+</code>
+=== 나. 삭제하기 버튼 ===
+TodoListPage.kt에 다음과 같이 버튼 클릭 이벤트를 추가한다.
+<code kotlin>
+          TodoItem(item = item, onDelete = {viewModel.deleteTodo(item.id)})
+</code>
+위와 같이 onDelete라는 대리자를 지정했으므로 다음과 같이 TodoItem함수를 바꿔준다.
+<code kotlin>
+fun TodoItem(item : Todo, onDelete : ()-> Unit) {
+(중략)
+        IconButton(onClick = onDelete ) {
+(후략)
+</code>
+==== 다. 전체 코드 ====
+TodoListPage.kt의 전체 코드는 다음과 같다.
+<file kotlin "TodoListPage.kt">
+package com.dklaw.gogo2.pages
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.livedata.observeAsState
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.dklaw.gogo2.R
+import com.dklaw.gogo2.database.Todo
+import com.dklaw.gogo2.database.TodoViewModel
+import java.time.format.DateTimeFormatter
+@Composable
+fun ContactsPage(viewModel: TodoViewModel) {
+    val todoList by viewModel.todoList.observeAsState()
+    var inputText by remember { mutableStateOf("") }
+    Column(modifier = Modifier
+        .fillMaxHeight()
+        .padding(8.dp), horizontalAlignment = Alignment.CenterHorizontally)
+    {
+        Spacer(modifier = Modifier.height(32.dp))
+        Text(text = "할일", fontSize = 32.sp, modifier = Modifier.padding(vertical = 16.dp))
+        Row (modifier = Modifier
+            .fillMaxWidth()
+            .padding(8.dp), horizontalArrangement = Arrangement.SpaceEvenly){
+            OutlinedTextField(value = inputText, onValueChange = {
+                inputText = it
+            })
+            Button(onClick = { viewModel.addTodo(inputText) }) {
+                Text(text = "Add")
+                inputText = ""
+            }
+        }
+        todoList?.let {
+            LazyColumn(
+                content = {
+                    itemsIndexed(it) {
+                            index : Int, item : Todo ->
+                        TodoItem(item = item, onDelete = {viewModel.deleteTodo(item.id)})
+                    }
+                }
+            )
+        }?: Text(
+            modifier = Modifier.fillMaxWidth(),
+            textAlign = TextAlign.Center,
+            text = "No Items yet",
+            fontSize = 16.sp
+        )
+    }
+}
+@Composable
+fun TodoItem(item : Todo, onDelete : ()-> Unit) {
+    val timeFormater : DateTimeFormatter = DateTimeFormatter.ofPattern("yyyy년 M월 d일 a h시 m분")
+    val nowString = item.createdAt.format(timeFormater)
+    Row (modifier = Modifier
+        .fillMaxWidth()
+        .padding(8.dp)
+        .clip(RoundedCornerShape(16.dp))
+        .background(MaterialTheme.colorScheme.primary)
+        .padding(16.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Column (modifier = Modifier.weight(1f)){
+            Text(text = nowString, fontSize = 10.sp, color = Color.LightGray)
+            Text(text = item.title, fontSize = 20.sp, color = Color.White)
+        }
+        IconButton(onClick = onDelete ) {
+            Icon(painter = painterResource(id = R.drawable.baseline_delete_24), contentDescription = "Delete", tint = Color.White)
+        }
+    }
+}
+</file>