Jetpack Composes 01

Posted 2022-05-30 大前端之旅

Jetpack Composes

Jetpack Composes 是什么 ？

Jetpack Compose 是用于构建原生界面的最新的 android 工具包，采用声明式 UI 的设计，拥有更简单的自定义和实时的交互预览功能，由 Android 官方团队全新打造的 UI 框架

1.选择创建 Empty Compose Activity

2. 保持版本更新

尝试使用最新的 Compose 版本和 Compose 要求的 Kotlin 版本 (1.5.31)

Gradle 版本: 7.2

可手动在 gradle-wrapper.properties 中更新

gradle-wrapper.properties

#Thu May 26 08:35:05 CST 2022
distributionBase=GRADLE_USER_HOME
distributionUrl=https\\://services.gradle.org/distributions/gradle-7.2-bin.zip
distributionPath=wrapper/dists
zipStorePath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME

build.gradle.kts (Project)

buildscript 

    val compose_version by extra("1.1.1") // Compose 版本

    repositories 
        google()
        mavenCentral()
    
    dependencies 

        classpath("com.android.tools.build:gradle:7.1.3")

        // Kotlin 版本，注意：Compose 版本有时候需要要求 Kotlin 到达一定的版本，请同步更新
        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:1.6.10")

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle.kts files
    

build.gradle (Project)

buildscript 
    ext 
        compose_version = '1.1.1'
    
    repositories 
        google()
        mavenCentral()
    
    dependencies 
        classpath 'com.android.tools.build:gradle:7.1.3"'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.6.10"

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    

3. 配置 Gradle（可忽略）

您需要将应用的最低 API 级别设置为 21 或更高级别，并在应用的 build.gradle 文件中启用 Jetpack Compose，如下所示。另外还要设置 Kotlin 编译器插件的版本。

build.gradle

plugins 
    id 'com.android.application'
    id 'org.jetbrains.kotlin.android'


android 
    compileSdk 32

    defaultConfig 
        applicationId "com.example.composestudy"
        minSdk 25
        targetSdk 32
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
        vectorDrawables 
            useSupportLibrary true
        
    

    buildTypes 
        release 
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        
    
    compileOptions 
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    
    kotlinOptions 
        jvmTarget = '1.8'
    
    buildFeatures 
        compose true
    
    composeOptions 
        kotlinCompilerExtensionVersion compose_version
    
    packagingOptions 
        resources 
            excludes += '/META-INF/AL2.0,LGPL2.1'
        
    


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'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
    debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"

4. 编写第一个 Compose 程序

现在，如果一切都正常，我们可以看到，MainActivity.kt 上显示以下代码

MainActivity.kt

package com.example.composestudy

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.composestudy.ui.theme.ComposestudyTheme

class MainActivity : ComponentActivity() 
    override fun onCreate(savedInstanceState: Bundle?) 
        super.onCreate(savedInstanceState)
        setContent 
            ComposestudyTheme 
              //这里根据你创建的项目有所不同
                // 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() 
    ComposestudyTheme 
        Greeting("Android")
    

现在，我们将 MainActivity.kt 修改成以下：

MainActivity.kt

class MainActivity : ComponentActivity() 
    override fun onCreate(savedInstanceState: Bundle?) 
        super.onCreate(savedInstanceState)
        setContent 
            
        
    

在明天的中，你将会通过添加不同的元素来构建一个简单的 app