03_LazyColumn & Alert

LazyColumn이란?

보이는 것만 보여주는 것, 시야에서 벗어난건 사라지게 하여 최적화를 유지함
(like. 리사이클러뷰)

• LazyColumn도 modifier(제어자)사용 가능
• scope를 가지고 있음
• content 안에 반복으로 만들어줄 itemList넣어줌

기본 사용법

// 목록 상태를 지켜보는 변수
//Compose에서 어떠한 상태 값이 바뀌게 되면 재구성(Recomposition)이 일어나게 된다
//MutableState 클래스는 Compose에서 읽기와 쓰기를 관찰하기 위해 만들어진 클래스
val sItems by remember {//by 키워드를 사용하게 되면 get/set에 대한 위임이 이루어지
    mutableStateOf(listOf<ShoppingItem>())
}

LazyColumn(
    modifier = Modifier
        .fillMaxSize()
        .padding(16.dp),
    content = {
        items(sItems) {
			ShoppingListItem(it, {}, {})
		}
    })
    
    
// LazyColumn가 가진 list를 보여줄 모양 꾸민 fun
@Composable
fun ShoppingListItem(
    item: ShoppingItem,
    onEditClick: () -> Unit,
    omDeleteClick: () -> Unit,
) {
    Row(modifier = Modifier
        .padding(8.dp)
        .fillMaxWidth()
        .border(
            border = BorderStroke(2.dp, Color.Blue),
            shape = RoundedCornerShape(20)
        )) {
        Text(text = item.name, modifier = Modifier.padding(8.dp))
    }
}

Alert 띄우기

• 알럿 화면 만드는 법
• alert을 만들려는 함수 위에 @OptIn(ExperimentalMaterial3Api::class) 붙여줘야함
• mutableStateOf가 false면 화면에서 안보임 true가 되면 보임

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun alert() {
	var showDialog by remember {
        mutableStateOf(false) //표시 상태 지켜보는 애 true가 되면 보임
    }
    
     Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center
    ) {
          Button(
              onClick = { showDialog = true },
              modifier = Modifier.align(Alignment.CenterHorizontally)
          ) {
          	
          
              Text(text = "Add Item")
          }
    
    
    		if (showDialog) {
            AlertDialog(onDismissRequest = {showDialog = false},
                title = { Text(text = "추가") },
                text = { Column {
                    OutlinedTextField(
                        value = itemName,
                        onValueChange = { itemName = it},//값을 입력할 떄 마다 보여줌
                        singleLine = true, //다중줄 막음
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(8.dp),
                    )
                    OutlinedTextField(
                        value = itemQuntity,
                        onValueChange = { itemQuntity = it},//값을 입력할 떄 마다 보여줌
                        singleLine = true, //다중줄 막음
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(8.dp),
                    )
                }},
                confirmButton = {
                Row(modifier = Modifier
                    .fillMaxWidth()
                    .padding(8.dp),
                    horizontalArrangement = Arrangement.SpaceBetween //양 끝에 위치하기
                ) {
                    Button(onClick = {
                        if (itemName.isNotBlank()) {
                            val newItem = ShoppingItem(
                                id = sItems.size+1,
                                name = itemName,
                                quantity = itemQuntity.toInt()
                            )
                            sItems = sItems + newItem
                            showDialog = false
                            itemName = ""
                        }

                    }) {
                        Text(text = "Add")
                    }
                    
                    Button(onClick = {showDialog = false}) {
                        Text(text = "Close")
                    }
                }
            })
        }
    }
    
}

람다

• (입력으로 사용할 유형) -> (출력 유형) = {원하는 로직}

	// (입력으로 사용할 유형) -> (출력 유형) = {원하는 로직}
    val dn:(Int) -> Int = {it*2}

onEditClick: () -> Unit
=> 입력을 받지 않고 출력도 없단(Unit) 뜻