Jetpack Compose 教學上課講義【從零開始學 Jetpack Compose 程式設計】Jetpack Compose 依賴庫介紹

 

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

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

課程目標

除了 Jetpack Compose 依賴庫介紹外，還要介紹引用 Kotlin 的部分。

Gradle (Project 層級)

buildscript {
    ext {
        compose_version = '1.0.1'
    }
}

plugins {
    id 'org.jetbrains.kotlin.android' version '1.5.21' apply false
}

Gradle (module 層級)

plugins {
    id 'org.jetbrains.kotlin.android'
}

android {
    kotlinOptions {
        jvmTarget = '1.8'
    }
    buildFeatures {
        compose true
    }
    composeOptions {
        kotlinCompilerExtensionVersion compose_version
    }
}

dependencies {

    implementation 'androidx.core:core-ktx:1.7.0'
    implementation "androidx.compose.ui:ui:$compose_version"
    implementation "androidx.compose.material:material:$compose_version"
    implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.1'
    implementation 'androidx.activity:activity-compose:1.3.1'

    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
    debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
}

常用元件

https://developer.android.com/jetpack/compose/setup#groovy

dependencies {
    implementation 'androidx.compose.ui:ui:1.1.1'
    // Tooling support (Previews, etc.)
    implementation 'androidx.compose.ui:ui-tooling:1.1.1'
    // Foundation (Border, Background, Box, Image, Scroll, shapes, animations, etc.)
    implementation 'androidx.compose.foundation:foundation:1.1.1'
    // Material Design
    implementation 'androidx.compose.material:material:1.1.1'
    // Material design icons
    implementation 'androidx.compose.material:material-icons-core:1.1.1'
    implementation 'androidx.compose.material:material-icons-extended:1.1.1'
    // Integration with activities
    implementation 'androidx.activity:activity-compose:1.4.0'
    // Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.4.1'
    // Integration with observables
    implementation 'androidx.compose.runtime:runtime-livedata:1.1.1'
    implementation 'androidx.compose.runtime:runtime-rxjava2:1.1.1'

    // UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.1.1'
}

將 Jetpack Compose 添加到現有的應用程式中

https://developer.android.com/jetpack/compose/interop/adding