Jetpack Compose-入门

发表于 更新于 分类于
Jetpack Compose-入门

前言

之前写过一系列的Jetpack Compose相关的文章，这里做一下整体的汇总。

汇总

UI相关

界面的适配

https://www.psvmc.cn/article/2024-04-07-jetpack-compose-ui-adaptation.html

基本组件

https://www.psvmc.cn/article/2024-03-13-jetpack-compose-components.html

图片

https://www.psvmc.cn/article/2024-03-13-jetpack-compose-image.html

布局

https://www.psvmc.cn/article/2024-03-13-jetpack-compose-layout.html

列表

https://www.psvmc.cn/article/2024-03-14-jetpack-compose-list.html

Modifier

https://www.psvmc.cn/article/2024-03-14-jetpack-compose-modifier.html

图标字体

https://www.psvmc.cn/article/2025-07-30-jetpack-compose-iconfont.html

Effect与协程

https://www.psvmc.cn/article/2024-03-15-jetpack-compose-coroutine.html

权限

https://www.psvmc.cn/article/2025-07-30-jetpack-compose-permission.html

页面跳转与传值

https://www.psvmc.cn/article/2024-03-22-jetpack-compose-activity-navigation.html

创建项目

现在创建项目默认就是使用的Jetpack Compose。

创建Activity

但是使用IDEA没有直接创建使用Jetpack Compose的Activity。

我们可以创建空的Activity，把生成布局文件取消勾选。

image-20250729144318386

然后修改一下

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
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import com.xhkjedu.zxs_android.ui.theme.AppAndroidTheme

class LoginActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            AppAndroidTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->

                    Column(
                        modifier = Modifier
                            .padding(innerPadding)
                            .fillMaxSize()
                            .background(Color.White)
                    ) {
                        Text("我是标题")
                    }
                }

            }
        }
    }
}

沉浸式状态栏

res/values/themes.xml

1
2
3
4
5
6
7
8
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="Theme.Zxs_android" parent="android:Theme.Material.Light.NoActionBar">
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowTranslucentNavigation">false</item>
    </style>
</resources>

添加后如果我们向让我们的界面延伸到状态栏

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
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import com.xhkjedu.zxs_android.ui.theme.AppAndroidTheme

class LoginActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            AppAndroidTheme {
                Column(
                    modifier = Modifier
                        .fillMaxSize()
                        .background(Color.Red)
                ) {
                    Text("我是标题")
                }
            }
        }
    }
}

这时可以根据实际情况自己空留状态栏的高度

1
2
3
4
5
6
7
Box(
    modifier = Modifier
        .statusBarsPadding()
        .fillMaxSize(),
) {

}

如果想在状态栏之内

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
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import com.xhkjedu.zxs_android.ui.theme.AppAndroidTheme

class LoginActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            AppAndroidTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Column(
                        modifier = Modifier
                            .padding(innerPadding)
                            .fillMaxSize()
                    ) {
                        Text("我是标题")
                    }
                }

            }
        }
    }
}

全局变量

CommonTheme.kt

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
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.unit.dp

object CommonTheme {
    val DpXs = 4.dp
    val DpS = 8.dp
    val DpM = 12.dp
    val DpL = 16.dp
    val DpXl = 28.dp

    val CornerXl = RoundedCornerShape(DpXl)
    val CornerXlTop =
        RoundedCornerShape(
            topStart = DpXl,
            topEnd = DpXl,
            bottomEnd = 0.0.dp,
            bottomStart = 0.0.dp
        )
    val CornerXs = RoundedCornerShape(DpXs)
    val CornerXsTop =
        RoundedCornerShape(
            topStart = DpXs,
            topEnd = DpXs,
            bottomEnd = 0.0.dp,
            bottomStart = 0.0.dp
        )
    val CornerFull = CircleShape
    val CornerL = RoundedCornerShape(DpL)
    val CornerLEnd =
        RoundedCornerShape(
            topStart = 0.0.dp,
            topEnd = DpL,
            bottomEnd = DpL,
            bottomStart = 0.0.dp
        )
    val CornerLTop =
        RoundedCornerShape(
            topStart = DpL,
            topEnd = DpL,
            bottomEnd = 0.0.dp,
            bottomStart = 0.0.dp
        )
    val CornerM = RoundedCornerShape(DpM)
    val CornerNone = RectangleShape
    val CornerS = RoundedCornerShape(DpS)
}