[Compose] Component 알아보기 - Surface

surface :

- 가장 기본적으로 UI를 구현하는 기반 

 

elevation, border, shape, color 등 설정이 가능하다 

contentColor를 설정하지 않으면 color에 따라서 contentColor가 자동으로 설정된다

(contentColor가 설정되지 않았다면, 이 Surface는 배경 색상을 테마의 ColorScheme에 정의된 색상에 맞는 ContentColor를 반환한다. 예를 들어, 이 Surface의 색상이 ColorScheme.surface라면, contentColor는 ColorScheme.onSurface로 설정된다)

 Surface(
        modifier = Modifier.padding(10.dp),
        shadowElevation = 10.dp,
        border = BorderStroke(2.dp, color = Color.Cyan),
        shape = CircleShape,
        color = MaterialTheme.colorScheme.background
    ) {
        Text("Test",
            modifier = Modifier.padding(8.dp))
    }

 

 

 

compose는 margin이 있는게 아니라 padding이 존재한다 

만약, Surface내에 속한 Text component가 margin을 가져야한다면 Text에 padding을 주는게 아니라 surface에 패딩을 준다

Surface(
    modifier = Modifier.padding(5.dp)
) {
    Button({

    }) {
        Text("Test")
    }
}