jetpack compose : (Step 1) Without ViewModle(NoteApp)

screen(component), model, data 패키지 생성

 

1. NoteScreen  생성

여러번 사용되는 TextField는 component에 InputTextField를 만들어서 재사용

InputTextField.kt(stateless)

@Composable
fun InputTextField(
   modifier: Modifier = Modifier,
   text: String,
   label: String,
   onChange: (String) -> Unit
) {
   TextField(
      value = text, onValueChange = onChange,
      label = { Text(label)},
      modifier = modifier.fillMaxWidth().padding(10.dp)
         .background(Color.Transparent),
   )
}

메인 화면 구성 : NoteScreen.kt

입력 값으로 List<T>, Lambda (onAdd : (T) -> Unit, onRemove : (T) -> Unit) 를 주입함

InputExtField에 대한 변수(mutableStateOf)를 생성

click event에 대한 lambda를 입력 => 추후에 데이터 변경 생성

@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun NoteScreen(
   notes: List<Note>,
   onAdd: (Note) -> Unit,
   onRemove: (Note) -> Unit,
) {
   var title by remember { mutableStateOf("") }
   var description by remember { mutableStateOf("") }

   val keyboardController = LocalSoftwareKeyboardController.current

   Column(
      modifier = Modifier.padding(4.dp),
      verticalArrangement = Arrangement.Top,
      horizontalAlignment = Alignment.CenterHorizontally
   ) {
      InputTextField(text = title, label = "title", onChange = { title = it })
      InputTextField(text = description, label = "input text", onChange = { description = it })
      Spacer(modifier = Modifier.padding(top = 14.dp))
      Button(
         onClick = {
            if (title.isNotEmpty() && description.isNotEmpty()) {
               onAdd(Note(title = title, description = description))
               title =""
               description = ""
               keyboardController?.hide()
            }
         },
      ) {
         Text(text = "Save")
      }
      LazyColumn() {
         items(notes){ note ->
            Surface(
               modifier = Modifier
                  .fillMaxWidth()
                  .padding(4.dp),
               shape = RoundedCornerShape(6.dp), color = Color.LightGray, elevation = 8.dp) {
               Column(
                  horizontalAlignment = Alignment.CenterHorizontally,
                  modifier = Modifier
                     .clickable { onRemove(note) }
                     .padding(horizontal = 14.dp, vertical = 6.dp)
               ) {
                  Text(note.title)
                  Text(" :  ${note.description}")
                  Text(note.entryDate
                       .format(DateTimeFormatter.ofPattern("u-M-d H:m", Locale.KOREA)))
               }
            }
         }
      }
   }
}

2. Model 생성

data class Note(
   val id: UUID = UUID.randomUUID(),
   val title: String,
   val description: String,
   val entryDate: LocalDateTime = LocalDateTime.now()
)

3. MainActivity 적용

class MainActivity : ComponentActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      setContent {
         NoteAppReviewTheme {
            Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background) {
//               val noteList = NoteDataSource().loadNoteData()
               val notes = remember { mutableStateListOf<Note>() }
               NoteScreen(notes = notes,
                  onAdd = {
                     notes.add(it)},
                  onRemove = {
                     notes.remove(it)}
               )
            }
         }
      }
   }
}