JetPack Compose_ Column, Row, Text

<이거 보면서 공부하는 중>

https://www.youtube.com/playlist?list=PLxTmPHxRH3VV8lJq8WSlBAhmV52O2Lu7n 

Jetpack Compose

 

---

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            StudyComposeTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                   Text("Hello")
                   Text("World")
                }
            }
        }
    }
}

이렇게 하면 글자가 겹쳐 보인다. 그래서 필요한게 Column과 Row!

 

---

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            StudyComposeTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                    Column() {
                        Text("Hello")
                        Text("World")
                        Row() {
                            Text("Kotlin")
                            Spacer(Modifier.width(16.dp))   //공간을 줄 수 있다.
                            Text("Hello!!")
                        }
                    }


                }
            }
        }
    }
}

이렇게 사용 가능하다!

 

Column() 이런식으로 괄호가 있는데, 이 괄호를 이용하여 속성을 지정해 줄 수 있다. 

Column(modifier = Modifier
                        .background(color= Color.Magenta)
                        .padding(16.dp)
                    ) {
                        Text("Hello")
                        Text("World2")
                    }

이렇게 글자의 배경 색상이나 padding 을 지정해 줄 수 도 있다.

 

(코드는 순서대로 진행이 된다고 한다)

---

 Column(modifier = Modifier
                        .fillMaxSize()	//화면에 꽉채우고 싶을 때
                        .background(color= Color.Magenta)
                        .padding(16.dp),
                        horizontalAlignment = Alignment.CenterHorizontally,
                        verticalArrangement = Arrangement.Center
                    ) {
                        Text("Hello")
                        Text("World2")
                    }

결과