Android Compose 学习笔记1:第一个 Android 应用

发表于 分类于 阅读次数： 本文字数： 468 阅读时长 ≈ 2 分钟

Android Compose 学习笔记的第一篇，创建第一个 Android 应用。通过修改背景颜色和添加内边距，演示了 Compose 中 Surface 和 Modifier 的使用方法。最后，给出了完整的解决方案代码。

MainActivity

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            AndroidComposeExpTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Greeting("Android")
                }
            }
        }
    }
}

onCreate()函数中的 setContent()函数用于通过可组合函数定义布局。所有标有 @Composable注释的函数都可以从 setContent()函数或其他可组合函数调用。

file_110.jpg 1.在函数前添加 @Composable注释。 2.@Composable函数名称要大写。 3.@Composable函数不能返回任何内容。

更改背景颜色

file_67.jpg
1
2
3
4
5
6
7
8
9
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
   Surface(color = Color.Cyan) {
       Text(
           text = "Hi, my name is $name!",
           modifier = modifier
       )
   }
}
file_111.jpg

添加填充

Modifier用于增强或修饰可组合项。

1
2
3
4
5
6
7
8
9
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Surface(color = Color.Cyan) {
        Text(
            text = "Hi, my name is $name!",
            modifier = modifier.padding(24.dp)
        )
    }
}
file_109.jpg

解决方案代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
package com.tofu.greetingcard

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.tofu.greetingcard.ui.theme.AndroidComposeExpTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge() // 启用边缘到边缘模式，让应用内容可以延伸到系统导航栏和状态栏下方。
        setContent {
            AndroidComposeExpTheme {
                // 使用应用主题的“background”颜色创建一个Surface容器。
                Surface(
                    modifier = Modifier.fillMaxSize(), // 填充整个屏幕。
                    color = MaterialTheme.colorScheme.background // 设置背景颜色为主题定义的背景颜色。
                ) {
                    Greeting("Android") // 调用Greeting函数，传递“Android”作为参数。
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Surface(color = Color.Cyan) { // 创建一个Cyan颜色的Surface。
        Text(
            text = "Hi, my name is $name!", // 设置文本内容。
            modifier = modifier.padding(24.dp) // 添加24dp的内边距。
        )
    }
}

@Preview(showBackground = true) // 启用预览，并显示背景。
@Composable
fun GreetingPreview() {
    AndroidComposeExpTheme { // 使用应用主题。
        Greeting("tofu") // 调用Greeting函数，传递“tofu”作为参数。
    }
}