Skip to content

Kotlin basic with Compose

First App

Android Studio 下载

https://developer.android.com/studio?hl=zh-cn

设置字体:Source Code Pro
安装主题:开启 New UI > One Dark Theme

创建首个 Android 应用

创建项目:New Project > Empty Activity

创建项目后,在 MainActivity.kt 查看 Compose 的示例代码 :

kotlin
// 包名
package com.example.codelabfirstapp

import ...

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

// 2
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(text = "Hi, My Name is $name!", modifier = modifier )
}

// 3
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    CodelabFirstAppTheme {
        Greeting("Android")
    }
}

1. onCreate()

onCreate() 函数是此应用的入口点,并且会调用其他的函数来构建 UI。 在 Kotlin 程序中, main() 函数是 Kotlin 编译器在代码中开始编译的特定位置;在 Android 中,则是由 onCreate() 函数来担任这个角色。

onCreate() 函数中的 setContent() 函数用于通过可组合函数定义布局。任何标有 @Composable 注解的函数都可通过 setContent() 函数或其他可组合函数进行调用。该注解可告知 Kotlin 编译器 Jetpack Compose 使用的这个函数会生成 UI。

2. Greeting()

  • @Composable 函数名称采用首字母大写形式。
  • 需在该函数前面添加 @Composable 注解。
  • @Composable 函数无法返回任何内容。

3. @Preview

预览函数,可以无需重新编译的情况下进行预览。

更改背景颜色

Greeting() 修改后:

kotlin
import androidx.compose.ui.graphics.Color

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Surface(color = Color.Magenta) {
        Text(text = "Hi, My Name is $name!", modifier = modifier )
    }
}

使用 Surface()Text() 包起来,然后设置 Surface() 的属性。

添加内间距

设置 Text()modifer

kotlin
import androidx.compose.ui.unit.dp
import androidx.compose.foundation.layout.padding

//...
    Text(text = "Hi, My Name is $name!", modifier = Modifier.padding(24.dp))
//...

构建基本布局

Jetpack Compose

  • 声明式界面设计
  • 在 Compose 界面中 函数组合 在创建后是不可变的,无法进行修改
  • 当界面需要更新时,Compose 会自动重新执行可组合函数,呈现新的界面
  • 因此如果需要更新界面,只需将相关信息传递给 Compose 的组合函数
  • Compose 会智能跳过未变动的元素

Compose 函数命名规则

  • 必须是名词:DoneButton()
  • 不能是动词或动词短语:DrawTextField()
  • 不能是名词性介词:TextFieldWithLink()
  • 不能是形容词:Bright()
  • 不能是副词:Outside()
  • 名词可以添加描述性形容词作为前缀:RoundIcon()

三个基本标准布局元素: ColumnRowBoxCompose 布局基础知识