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()
}

這個網誌中的熱門文章

nano 文字編輯器

2023 最新入門零基礎 Kotlin教學【從零開始學 Kotlin 程式設計】Kotlin 教學課程目錄 (Android Kotlin, IntelliJ IDEA, Android Studio, Android APP 開發教學)

最新入門零基礎 Java 教學【從零開始學 Java 程式設計】Java教學課程目錄 (IntelliJ IDEA 開發教學)

16天記下7000單字

Kotlin 教學【從零開始學 Kotlin 程式設計】IntelliJ IDEA 開發環境介紹