Jetpack Compose 教學上課講義【從零開始學 Jetpack Compose 程式設計】基本佈局，混和使用介紹

 

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

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

Layout basics
https://developer.android.com/jetpack/compose/layouts/basics#composable-functions

混和佈局範例一

@Composable
fun MixDemo() {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(10.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Box(
            Modifier
                .size(100.dp)
                .background(Color.Yellow)
        )
        Column(modifier = Modifier.padding(start = 20.dp)) {
            Box(
                Modifier
                    .width(250.dp)
                    .height(30.dp)
                    .background(Color.Green)
            )
            Box(
                Modifier
                    .padding(top = 10.dp)
                    .width(150.dp)
                    .height(30.dp)
                    .background(Color.Red)
            )

        }
    }
}

混和佈局範例二

Column {
    MixDemo()
    MixDemo()
    MixDemo()
    MixDemo()
    MixDemo()
    MixDemo()
}