JetPack Compose_ Box

 

-겹치는게 허용되는  

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {        //컴포저블만 들어올 수 있는 영역
            StudyComposeTheme {
                Surface(color = MaterialTheme.colors.background) {
                   // Greeting("Android")
                    Box(){
                        Text("Hello")
                    }
                }
            }
        }
    }
}

1. Box로 감싸기만 하면 아무런 변화가 없다.

2.Box에 modifier를 추가하면 ?

Box(modifier = Modifier.background(color=Color.Gray)){
    Text("Hello")
}

 

3.Text를 하나 더 추가하면  겹쳐서 보인다. FrameLayout과 비슷하다고 보면 된다.

Box(modifier = Modifier.background(color=Color.Gray)){
    Text("Hello")
    Text("~~~~~Hello!!")
}

 

+

.fillMaxWidth()  =  가로 채우기

.fillMaxHeight() = 세로 채우기

.fillMaxSize()    =  전체 재우기

 

4. Box 속성에

contentAlignment = Alignment.BottomCenter

를 넣어주면 Box 안에 있는 모든 속성에 적용이 되는데 따로 적용을 하고 싶다면 

Box(modifier = Modifier
    .background(color = Color.Gray)
    .fillMaxSize()
){
    Text("Hello")
    Box(modifier = Modifier
        .fillMaxSize()
        ,
        contentAlignment = Alignment.TopEnd
    ){
        Text("~~~~~Hello!!")
    }
    
}

따로 Box로 감싸서 속성을 부여해 주면 된다.

5.

Box(modifier = Modifier
    .background(color = Color.Gray)
    .fillMaxWidth()
    .height(200.dp)
){
    Text("Hello")
    Box(modifier = Modifier
        .fillMaxSize()
        .padding(16.dp)
        ,
        contentAlignment = Alignment.TopEnd
    ){
        Text("~~~~~Hello!!")
    }

}

이렇게 바깥에 있는 Box의 크기를 200dp로 설정해주면 안에 있는 Box는 바깥에 맞춰서 설정이 된다.