前言

Jetpack Compose床估，屬于Android原生的聲明式UI框架雇寇，個(gè)人覺得和Flutter有70%的相似程度，所以使用過Flutter的開發(fā)者會(huì)更容易上手虽另，本篇就在原生項(xiàng)目基礎(chǔ)上暂刘，集成Jetpack Compose。

步驟

確保你的項(xiàng)目添加了Kotlin

• 項(xiàng)目根目錄的build.gradle文件中捂刺，添加kotlin版本以及依賴（如果你已經(jīng)配置谣拣，則可以跳過）

buildscript {
    ext.kotlin_version = '1.7.10'
    
    dependencies {
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}

添加Compose配置

• app可運(yùn)行模塊的build.gradle文件中募寨，添加Compose配置

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'

android {
    packagingOptions {
        //Compose需要的配置
        resources {
            excludes += '/META-INF/{AL2.0,LGPL2.1}'
        }
    }
    
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}

• 具有Compose功能的Module模塊，如模塊名叫：compose森缠，打開模塊的build.gradle文件拔鹰，添加Compose配置以及依賴（Compose的周邊庫很多，示例中是Compose的基本依賴贵涵，有這些基本依賴列肢，一個(gè)Compose頁面就能編寫了）

apply plugin: 'com.android.library'
apply plugin: 'kotlin-android'

    android {
        //此 module 啟動(dòng) Jetpack Compose
        buildFeatures {
            compose true
        }
        
        //kotlin 相關(guān)參數(shù)配置
        kotlinOptions {
            jvmTarget = '1.8'
            //Kotlin 1.7版本刪除了該屬性，如果使用1.7以下版本独悴，則需要添加這個(gè)屬性
            //useIR = true
        }
    
        //Jetpack compose 相關(guān)參數(shù)配置
        composeOptions {
            kotlinCompilerExtensionVersion "1.3.0"
        }
        
        compileOptions {
            sourceCompatibility JavaVersion.VERSION_1_8
            targetCompatibility JavaVersion.VERSION_1_8
    }
        
    dependencies {
       implementation fileTree(dir: 'libs', include: ['*.jar'])
       implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
       
       //Jetpack Compose
       implementation "androidx.activity:activity-compose:1.5.1"
       implementation "androidx.compose.ui:ui:${compose_version}"
       implementation "androidx.compose.ui:ui-tooling-preview:${compose_version}"
       implementation "androidx.compose.foundation:foundation:${compose_version}"
       implementation "androidx.compose.material:material:${compose_version}"
       debugImplementation "androidx.compose.ui:ui-tooling:${compose_version}"
       debugImplementation "androidx.compose.ui:ui-test-manifest:${compose_version}"
    }
}

添加Compose頁面

• 新建Activity例书，繼承于ComponentActivity，編寫一個(gè)居中"HelloWorld"文字頁面

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeTestTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    Greeting("Android")
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeTestTheme {
        Greeting("Android")
    }
}

• AndroidManifest.xml清單文件中刻炒，配置該Activity

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.zh.android.composetest">

    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.ComposeTest"
        tools:targetApi="31">

        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:label="@string/app_name"
            android:theme="@style/Theme.ComposeTest">
            
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>