Jetpack Compose 教學上課講義【從零開始學 Jetpack Compose 程式設計】Column 垂直佈局方式

 

【從零開始學 Jetpack Compose 程式設計】

線上教學課程目錄: https://bit.ly/3JF4SFA
Youtube 課程播放清單：https://bit.ly/3tFjRbx
Udemy 線上課程：https://bit.ly/3MbVnhO

Compose layout basics

https://developer.android.com/jetpack/compose/layouts/basics

Column 垂直佈局方式範例

  Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center,
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(),

        ) {
        Box(modifier = Modifier
            .size(50.dp)
            .background(Color.Yellow))
        Box(modifier = Modifier
            .size(50.dp)
            .background(Color.Green))
        Box(modifier = Modifier
            .size(50.dp)
            .background(Color.Red))
    }

文字標籤

Column(
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.Center,
    modifier = Modifier
        .fillMaxWidth()
        .fillMaxHeight(),

    ) {
    Text("HKT線上教室0")
    Text("HKT線上教室1")
    Text("HKT線上教室2")
}