1. SetContent

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            //여기에 Composable 함수가 위치하게 된다.
        }
    }
}

SetContent 함수는 Composable 함수를 렌더링 하는 기능을 가진다.
Composable 함수는 기본적으로 setContent 블록 안에 위치하게 된다.

2. Surface

Material Design의 Suface를 나타내는 Composable 이다.
Material Design의 가이드라인에 따라 UI의 표면을 나타내는 데 사용된다.
- 렌더링 요소의 배경색상, 크기, 패딩, 외곽선 등을 지정할 수 있다.

Surface(
    modifier = Modifier.size(200.dp),
    color = Color.Yellow
) {
    // Composable functions here
}

다음과 같이 여러 속성들을 조합해서 사용할 수도 있다.

// 프리뷰 함수
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    FirstApplicationTheme() {
        // A surface container using the 'background' color from the theme
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colorScheme.background
        ) {
            Row(
                modifier = Modifier
                    .background(Color.Gray) //배경색 지정
                    .fillMaxSize() //사이즈 지정
                    .padding(16.dp), //padding 지정
                verticalAlignment = Alignment.CenterVertically // vertical 중앙정렬
            ) {
                Text(text = "hello")
                Spacer(modifier = Modifier.width(20.dp))
                Text(text = "World")
            }
        }
    }
}

Untitled