Jetpack Compose学习 之 HelloWorld

Posted 2021-10-01 切切歆语

最近在学习Jetpack Compose，来分享一哈，它是Google推出的一个新的UI工具包，旨在帮助开发者更快、更轻松地在android 平台上构建Native应用

Jetpack Compose 是用于构建原生界面的新款 Android 工具包。它可简化并加快 Android 上的界面开发。使用更少的代码、强大的工具和直观的 Kotlin API，快速让应用生动而精彩。

多说无益，直接上手，第一步肯定是下载开发工具，然后运行Hello Word

官网下载工具

我下载最新的Android Studio 预览版 Canary版本

下载地址为：https://developer.android.google.cn/studio/preview?authuser=0

下载之后，解压就可以直接使用，在bin文件夹下点击studio64.exe 运行即可

Android Studio 准备好之后，我们就可以开始Jetpack Compose 项目创建了。

首先点击 Projects -> New Project 导航到模板选择界面，这个界面多了一个Empty Compose Activity 模板，就选择这个，它会默认帮我们配置好Jetpack Compose 需要的一些配置和库。
 

和Android Studio的创建一样创建项目，点击Next，配置项目名称、报名、保存路径等配置即可

android {
    compileSdk 30
    buildToolsVersion "30.0.3"

    defaultConfig {
        applicationId "com.example.hello"
        minSdk 23
        targetSdk 30
        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'
        useIR = true
    }

     // 开启compose
    buildFeatures {
        compose true
    }
    composeOptions {
        kotlinCompilerExtensionVersion compose_version
        kotlinCompilerVersion '1.4.32'
    }
}


//compose 工具包
dependencies {

    implementation 'androidx.core:core-ktx:1.3.2'
    implementation 'androidx.appcompat:appcompat:1.2.0'
    implementation 'com.google.android.material:material:1.3.0'
    implementation "androidx.compose.ui:ui:$compose_version"
    implementation "androidx.compose.material:material:$compose_version"
    implementation "androidx.compose.ui:ui-tooling:$compose_version"
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.1'
    implementation 'androidx.activity:activity-compose:1.3.0-alpha06'
    testImplementation 'junit:junit:4.+'
    androidTestImplementation 'androidx.test.ext:junit:1.1.2'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'
    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
}

接下来我们来看MainActivity默认生成的代码

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

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

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

在MainActivity界面上预览：点击Build & Refresh...

改一下代码：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
           Text(text = "Hello World!")
        }
    }
}

然后运行到手机上：

到这里我们的Compose Hello World就完成了

官网学习文档：

https://developer.android.google.cn/jetpack/compose/documentation

google提供的案例

https://github.com/googlecodelabs/android-compose-codelabs